在vue-cli中应用scss/less全局变量

发布时间:2019-05-26 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了在vue-cli中应用scss/less全局变量脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

首先需要安装插件:sass-resources-loader

npm i sass-resources-loader --save-dev

scss: 修改vue-cli的build/utils.js,找到scss的加载设置:

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

改为

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass').concat({
      loader:'sass-resources-loader',
      options:{
        resources:path.resolve(__dirname,'./../src/assets/scss/base.scss'),// 这里的路径即是我们定义全局变量的地方
      }
    }),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

less: 修改vue-cli的build/utils.js,找到less的加载设置:

@H_857_126@function lessResourceLoader() {
        VAR loaders = [
            cssLoader,
            'less-loader',
            {
                loader: 'sass-resources-loader',
                options: {
                    resources: [
                        path.resolve(__dirname, '../src/assets/styles/common.less'),// 这里的路径即是我们定义全局变量的地方
                    ]
                }
                        }
        ];
        if (options.extract) {
            return ExtractTextPlugin.extract({
                use: loaders,
                fallback: 'vue-style-loader'
            })
        } else {
            return ['vue-style-loader'].concat(loaders)
        }
    }
    
    less: generateLoaders('less') 替换成上面自定义的函数 less: lessResourceLoader()

更多详细知识介绍请访问我的个人主页

脚本宝典总结

以上是脚本宝典为你收集整理的在vue-cli中应用scss/less全局变量全部内容,希望文章能够帮你解决在vue-cli中应用scss/less全局变量所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:divVue