在vue-cli腳手架采用scss正確的使用姿勢
步驟一: 安裝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-resources-loader
npm install sass-resources-loader --save-dev
步驟三: 修改build中的utils.js
scss: generateLoaders('sass')
修改成:
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/global.scss')
}
}
)
可知,我是在assets中創建了一個global.scss文件。
最后,在組件中的style標簽添加lang="scss",就OK了。
=======================================================
各位如果引入和使用中有任何問題可以給我發私信聯系
