四时宝库

程序员的知识宝库

「Vue—css」使用sass/scss并定义全局变量

1:安装sass-node

cnpm install sass-node --save --dev 

2:安装sass-loader

cnpm install sass-loader --save --dev

3:在vue.config.js中进行配置

module.exports = {
	css: {
		loaderOptions: {
			scss: {
				// 全局变量样式的地址为assets/css/style.scss
				prependData: `@import "~@/assets/css/style.scss";`
			},
		}
	}
}


4:在assets/css/style.scss中定义全局变量

$base-color:red;


5:在页面中使用

.title {
	color: $base-color;
}

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接