Vue項(xiàng)目中使用scss,如果寫了一套完整的有變量的scss文件，全局引入供每個(gè)組件（頁(yè)面）使用。
可以在mian.js全局引入，下面是使用方法。
1： 安裝node-sass、sass-loader、style-loader
npm install node-sass --save-dev
npm install sass-loader --save-dev
npm install style-loader --save-dev
注意安裝sass-loader版本過高問題，若遇到，降低版本即可，例如sass-loader@7.0.1
2： 安裝sass-resources-loader （如果不安裝的話變量會(huì)報(bào)錯(cuò)）
npm install sass-resources-loader --save-dev
3： 修改build中的utils.js
image.png
scss: generateLoaders('sass'), 修改為:
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
//這里寫自己的文件路徑（配置使用scss中變量及繼承中的屬性類）
resources: path.resolve(__dirname, '../src/assets/scss/commonBg.scss')
}
}
使用過程大概如下：
①引入外部.scss文件
image.png
其中部分代碼：
.z-background-color-white {
background-color: #ffffff;
}
.z-border-1px {
border-bottom: 1px solid #bbbbbb;
}
②組件中使用全局的屬性類
image.png
部分代碼：
.bas-information {
@extend .z-background-color-white;
@extend .z-border-1px;
font-size: 14px;
color: #666666;
height: 56px;
}
到此scss全局變量及繼承屬性類即可在所有組件（頁(yè)面）中使用。
