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)ISO 通过 vue.config.js 链接 Webpack 以将全局 .scss 导入添加到我的 .vue 文件的正确方法（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
    },
}

【问题讨论】：

标签： vue.js webpack sass nativescript-vue

【解决方案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 会抛出一个未定义的变量错误。