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

Question

我有一个我之前设置的 Vue.js 项目，它动态地将定义的 .scss 文件添加到我的 .vue 模板文件中，这样我就可以在模板中访问我的变量、mixin 等，而无需 @importing 它们，或者让他们从导入中复制代码。

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

Answer 1

Vue CLI provides a config 增强您的 CSS 加载程序：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      scss: {
        // sass-loader@^8.0.0
        prependData: `import "~@/styles/_global.scss";`,

        // sass-loader@^9.0.0 or newer
        additionalData: `import "~@/styles/_global.scss";`,
      }
    }
  }
}

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)

sass

webpack

vue.js

nativescript-vue