Vue 全局使用Sass

最新推荐文章于 2023-09-12 16:03:55 发布

゛轻描一个世界

最新推荐文章于 2023-09-12 16:03:55 发布

阅读量313

点赞数

分类专栏： VUE

本文链接：https://blog.youkuaiyun.com/wanghui374/article/details/102953671

版权

VUE 专栏收录该内容

12 篇文章

订阅专栏

Vue 全局使用Sass

1、安装依赖

npm install node-sass --save-dev //安装node-sass 
npm install sass-loader@7.3.1 --save-dev //安装sass-loader 
npm install sass-resources-loader --save-dev //sass-全局使用

2、修改webpack.base.conf规则

module: {
	rules: [
		{
			test: /\.sass$/,
			loaders: ['style', 'css', 'sass']
		}
	]
}

3、修改utils.js文件，设置scss主文件路径

return {
	css: generateLoaders(),
	postcss: generateLoaders(),
	less: generateLoaders('less'),
	sass: generateLoaders('sass', { indentedSyntax: true }),
	// scaa全局使用修改部分
	scss: generateLoaders('sass').concat(
		{
			loader: 'sass-resources-loader',
			options: {
				//你自己的scss全局文件的路径
				resources: path.resolve(__dirname, '../src/css/index.scss')
			}
		}
	),
	// scss: generateLoaders('sass'), //注释原来的
	stylus: generateLoaders('stylus'),
	styl: generateLoaders('stylus')
}