Vue引入sass并配置全局变量的方法

// sass: generateLoaders('sass', { indentedSyntax: true }),
// scss: generateLoaders('sass'),
// 新引入的sass-resources-loader
sass: generateSassResourceLoader(),
scss: generateSassResourceLoader(),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}

改完配置后重启服务就可以在

theme.scss

里定义全局变量并在页面中引用了。

需要注意的是，scss里的变量是

$

开头，而less里的变量是

@

开头。比如我想定义一个项目的主色调变量，我可以在

theme.scss

里这样定义：

$c-primary: #fd7a00;
$theme-blue: #3296fa;
$theme-red: #da3838;

引用变量的时候直接引用变量名即可。