Sass是一個基于Ruby編寫的CSS預處理器,它擴展了CSS語言,同時也讓我們能夠使用變量、嵌套規則、Mixin、函數等特性,來編寫更加簡潔、易于維護的CSS代碼。
在Vue.js項目中,我們可以使用Sass來進行CSS的開發。Vue-cli內置了Sass-loader,可以讓我們順利地在Vue.js項目中使用Sass。
// 安裝sass-loader和node-sass
npm install -D sass-loader node-sass
// 配置vue-cli的webpack.base.conf.js
// 找到如下代碼
{
test: /\.css$/,
loader: 'vue-style-loader!css-loader'
}
// 將其替換為
{
test: /\.css$/,
loader: 'vue-style-loader!css-loader!sass-loader'
}
注意:如果項目使用了vue-cli 3.x以上版本,則不需要手動配置Sass-loader,內置的webpack已經默認配置了Sass-loader。
然后我們就可以在.vue文件中使用Sass了。在