在Vue中,我們通常使用CSS樣式來美化頁面。而Stylus則是一種CSS預(yù)處理器,它讓我們可以使用類似于編程語言的方式來編寫樣式,從而提高效率與可維護(hù)性。在Vue中,我們可以全局引入Stylus,讓所有的組件都能夠使用它。
首先,我們需要在項(xiàng)目中安裝Stylus依賴:
npm install stylus stylus-loader --save-dev
接下來,在webpack配置文件中配置Stylus的loader:
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.styl(us)?$/,
use: [
'vue-style-loader',
'css-loader',
'stylus-loader'
]
}
]
}
}
在上述代碼中,首先使用了`vue-style-loader`,它將樣式代碼通過`