LESS&SCSS变量覆盖语法

在开发自已的组件库或是使用第三方组件库的时候，你很有可能会遇到需要覆盖组件库提供默认样式的情景。

本文简要记录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',
             },
    }