美文网首页
在vue-cli中应用scss/less全局变量

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

作者: 一叶障目5217 | 来源:发表于2019-03-17 15:54 被阅读0次

    首先需要安装插件: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的加载设置:

    
    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全局变量

          本文链接:https://www.haomeiwen.com/subject/oyyumqtx.html