Vue项目全局引用sass变量文件报错的解决办法

最新推荐文章于 2022-09-19 14:21:35 发布

Twisted F

最新推荐文章于 2022-09-19 14:21:35 发布

阅读量1.3w

点赞数 4

分类专栏： vue 文章标签： vue sass

本文链接：https://blog.csdn.net/sinat_37680470/article/details/79929400

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

通常情况咱们的sass变量会以单独的文件存放。我们在使用这些变量的时候如果在每个组件中import引用的显得特别麻烦，而且感觉很蠢QAQ，但是全局引用的时候又会报错。这时就需要用到sass-resources-loader插件并进行相应的配置就可以解决问题，具体配置如下：

1.安装插件 npm install sass-resources-loader -D

2.修改build/utils.js代码：

添加代码：

function generateSassResourceLoader () {
    var loaders = [
        cssLoader,
        'sass-loader',
        {
            loader: 'sass-resources-loader',
            options: {
                resources: [
                    path.resolve(__dirname, '../src/assets/sass/variable.scss'),
                ]
            }
        }
    ]
    if (options.extract) {
        return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader'
        })
    } else {
        return ['vue-style-loader'].concat(loaders)
    }
  }

修改代码：

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    // sass: generateLoaders('sass', { indentedSyntax: true }),
    // scss: generateLoaders('sass'),
    sass: generateSassResourceLoader(),
    scss: generateSassResourceLoader(),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

return中： // 为注释的代码，添加的代码为sass: generateSassResourceLoader(),scss: generateSassResourceLoader(),

generateSassResourceLoader函数中的'../src/assets/sass/variable.scss' 是你自己的路径和文件名

npm run dev重新启动