這篇文章主要介紹了.vue文件里如何寫scss，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
方法：首先安裝【node-sass和sass-loader】依賴；然后打開【webpack.base.conf.js】文件，在rule中添加scss規則；最后在【<style></style>】標簽內寫scss樣式。
在vue項目中使用scss
1.首先安裝依賴
npm install node-sass sass-loader --save-dev
2.找到build中webpack.base.conf.js,在rules中添加scss規則
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}<style lang='scss'> </style>
在vue項目全局中引入scss
1.全局引用時需要安裝sass-resources-loader
npm install sass-resources-loader --save-dev
2.修改build中的utils.js
將
scss: generateLoaders('sass')修改為
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
//你自己的scss全局文件的路徑
resources: path.resolve(__dirname, '../src/style/common.scss')
}
}
)感謝你能夠認真閱讀完這篇文章，希望小編分享.vue文件里如何寫scss內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
