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

问题描述

限时删除！！

我有我之前设置的 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')模块.出口 = {chainWebpack: 配置 =>{const ofs = ['vue-modules', 'vue', 'normal-modules', 'normal']const cssRules = config.module.rule('css')const postRules = config.module.rule('postcss')const addSassResourcesLoader = (规则，类型) =>{规则.oneOf(类型).use('sass-resources-loader').loader('sass-resources-loader').选项({resources: './src/styles/_global.scss',//你的资源文件或模式})}ofs.forEach(类型 => {addSassResourcesLoader(cssRules，类型)addSassResourcesLoader(postRules, type)})返回配置},}

解决方案

Vue CLI 提供配置来增强您的 CSS 加载器:

//vue.config.js模块.出口 = {css:{加载器选项:{scss:{prependData: `import "~@/styles/_global.scss";`,}}}}

I have Vue.js project I've setup previously that dynamically adds defined .scss files to my .vue template files, so I can access my variables, mixins, etc. in the templates without @importing them, or having them duplicate code from imports.

My problem is I'm setting up a NativeScript/Vue.js project with vue-cli-plugin-nativescript-vue and was curious if anyone has successfully setup their webpack to allow the same functionality. It's my understanding that the plugin replaces webpack with the latest when you run, as specified in the docs https://cli.vuejs.org/guide/webpack.html#replacing-loaders-of-a-rule.

Below is my vue.config.js (which compiles with no error) but doesn't seem to be working. I'm probably missing something or don't understand exactly how this is working, any help is appreciated.

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 CLI provides a config to augment your CSS loaders:

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

这篇关于ISO 通过 vue.config.js 链接 Webpack 的正确方法，以将全局 .scss 导入添加到我的 .vue 文件中 (vue-cli-plugin-nativescript-vue)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..