vue global variables using scss

1. Install scss

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

2. Installation sass-resources-loader

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

3. Modify the Configuration

Found in the build folder util.jsmodify sass compiler loader configuration, simply copy the code below into the

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)
		}
	}复制代码

The default configuration was changed to sass generateSassResourceLoader()

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

At this point you can use the service to restart!

note:

Introducing path 1.scss file must be written correctly! ! !

2. Copy generateSassResourceLoader and resolveResource these two functions, it must be placed inside exports.cssLoaders or will not find cssLoader

Reproduced in: https: //juejin.im/post/5d0345996fb9a07f0c467e86