vue 全局使用scss 變量

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