在項目中使用scss之前，先打開package.json,看看是否已經(jīng)安裝了sass需要的安裝包！
1.node-sass
2.sass-loader
3.style-loader
如果沒有可以進(jìn)行安裝運(yùn)行語句
npm install node-sass --save
npm install sass-loader --save
npm install style-loader --save
或者
npm install node-sass sass-loader style-loader --save
安裝完成之后package.json中會有這三個安裝包
然后在vue文件中可以這樣寫
<style lang="scss" scoped>
.nav{}
</style>
我在網(wǎng)上搜的資料有的需要去項目的build>webpack.base.conf.js>module>rules中添加一段話
我項目中沒有添加也是好使的。如果安裝包之后不好使，可以選擇添加這句話試試
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
npm install sass-resources-loader --save
然后在build>util.js中
scss: generateLoaders('sass')
修改成:
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/global.scss')
}
}
)
這樣就可以新建.scss的文件了。
我在src/assets/scss/style.scss新建了一個style.scss文件，里面寫了如下圖代碼
image
然后需要在vue.config.js里面進(jìn)行配置，如果還不知道什么是vue.config.js的同學(xué)，去查詢cli3官網(wǎng)，配置如下
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
@import "@/assets/scss/style.scss";
`
}
}
}
}
上面代碼的@代表了src目錄
然后我在vue文件的style里面就可以這么寫：
image
那么現(xiàn)在這樣就是我們所需要的cli3配置全局變量
--------后續(xù)有新的改進(jìn)會持續(xù)更新
