ISO通过vue.config.js链接Webpack以将全局.scss导入添加到我的.vue文件中的正确方法(vue-cli-plugin-nativescript-vue)

问题描述 投票:0回答:1

我之前已经设置了Vue.js项目,该项目将已定义的.scss文件动态添加到.vue模板文件中,因此我可以访问模板中的变量,mixins等,而无需@导入它们或使它们重复导入代码。

我的问题是我正在使用vue-cli-plugin-nativescript-vue设置NativeScript / Vue.js项目,并且很好奇是否有人成功设置了Webpack以允许相同的功能。据我了解,该插件会在您运行时以最新版本替换webpack,如文档https://cli.vuejs.org/guide/webpack.html#replacing-loaders-of-a-rule中所指定。

下面是我的vue.config.js(编译时没有错误),但似乎没有用。我可能丢失了一些东西,或者不清楚它是如何工作的,感谢您的帮助。


const path = require('path')

module.exports = {
    chainWebpack: config => {
        const ofs = ['vue-modules', 'vue', 'normal-modules', 'normal']
        const cssRules = config.module.rule('css')
        const postRules = config.module.rule('postcss')

        const addSassResourcesLoader = (rules, type) => {
            rules
                .oneOf(type)
                .use('sass-resoureces-loader')
                .loader('sass-resources-loader')
                .options({
                    resources: './src/styles/_global.scss', // your resource file or patterns
                })
        }
        ofs.forEach(type => {
            addSassResourcesLoader(cssRules, type)
            addSassResourcesLoader(postRules, type)
        })
        return config
    },
}
vue.js webpack sass nativescript-vue
1个回答
0
投票

Vue CLI provides a config扩充CSS加载程序:

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `import "~@/styles/_global.scss";`,
      }
    }
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.