在开发自已的组件库或是使用第三方组件库的时候,你很有可能会遇到需要覆盖组件库提供默认样式的情景。
本文简要记录SCSS & LESS变量覆盖代码片段。
SCSS
$brand-primary: #4071ff !default; // !default 必须添加否则不能覆盖
scss 对应 webpack 配置
{
loader: 'sass-loader',
options: {
data: '$brand-primary: #000;'
}
}
LESS
@brand-primary: #4071ff;
LESS 对应webpack 配置
{
loader: 'less-loader',
options: modifyVars: {
'brand-primary': '#4071ff',
},
}