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

Posted 2023-02-22

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

【英文标题】：ISO proper way to chain Webpack via vue.config.js to add global .scss imports to my .vue files (vue-cli-plugin-nativescript-vue)

【发布时间】：2020-09-16 12:27:15

【问题描述】：

我有我之前设置的 Vue.js 项目，它动态地将定义的 .scss 文件添加到我的 .vue 模板文件中，因此我可以在模板中访问我的变量、mixin 等，而无需 @import 或拥有它们来自导入的重复代码。

我的问题是我正在使用 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
    ,

【参考方案1】：

Vue CLI provides a config 来增强您的 CSS 加载器：

// vue.config.js
module.exports = 
  css: 
    loaderOptions: 
      scss: 
        prependData: `import "~@/styles/_global.scss";`,
      
    
  

【讨论】：

非常感谢，我认为这与我在旧 vue 项目中导入数据的经验相同，它为每个包含添加了样式。

@SL20XX 没问题 :)

这样对于 serve:web 来说确实可以正常工作，但是 serve:ios build 会抛出一个未定义的变量错误。