使用场景
因为产品风格的统一性，需要抽象需要抽象一些css变量与方法，如下文件。
// common.scss
$defaultSize: 12px !default;
@function rem($px){
@return $px / $defaultSize * 1rem;
}
$primary-color: #3b94f3;
$info-color: #70b4f9;
$success-color: #1ed278;
$warn-color: #ffa100;
$danger-color: #ed6114;
解决方式
每个scss文件引入common.scss（不推荐）
过于繁琐，维护性较差，如果是vue组件则每个组件都需要引入
在使用webpack打包时自动将common.scss打包到每个文件
需要安装sass-resources-loader，改插件抽闲scss(sass)代码到每个目标文件中
sass-resources-loader使用如下：
// webpack.default.js
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader', {
loader: 'sass-resources-loader',
options: {resources: path.resolve(__dirname, '../static/src/style/common.scss')}
}]
}
]
由于vue使用vue-loader来解析组件中的样式所以需要单独配置
<style lang="scss" scoped="true">
</style>
以上代码vue-loader解析
sass-resources-loader使用如下：
// webpack.default.js
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader', {
loader: 'sass-resources-loader',
options: {resources: path.resolve(__dirname, '../static/src/style/common.scss')}
}]
}
}
}
]
配置完毕后每一个vue组件在webpack编译时都会自动导入配置的目标文件代码
