vue 全局使用scss 变量-CSDN博客

1.安装scss

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass复制代码

2.安装sass-resources-loader

npm install --save-dev sass-resources-loader复制代码

3.修改配置

在 build 文件夹下找到 util.js 修改sass编译器loader的配置，直接把下面的代码复制进去

function resolveResouce(name) {
		return path.resolve(__dirname, '../src/assets/css/' + name);//更换为自己的路径
	}

	function generateSassResourceLoader() {
		var loaders = [
			cssLoader,
			// 'postcss-loader',
			'sass-loader',
			{
				loader: 'sass-resources-loader',
				options: {
					// 换为自己的scss文件名
					resources: [resolveResouce('style.scss')]
				}
			}
		];
		if (options.extract) {
			return ExtractTextPlugin.extract({
				use: loaders,
				fallback: 'vue-style-loader'
			})
		} else {
			return ['vue-style-loader'].concat(loaders)
		}
	}复制代码

将默认的sass配置改为 generateSassResourceLoader()

return {
		css: generateLoaders(),
		postcss: generateLoaders(),
		less: generateLoaders('less'),
		sass: generateSassResourceLoader(),
		scss: generateSassResourceLoader(),
		stylus: generateLoaders('stylus'),
		styl: generateLoaders('stylus')
	}复制代码

此时重启服务就可以使用了！

注意：

1.scss文件的引入路径一定要写正确！！！

2.复制generateSassResourceLoader和resolveResource这两个函数的时候，一定要放在exports.cssLoaders里面不然会找不到cssLoader