在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的加载设置：

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()

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