vue-cli設定css不生效的解決方法
阿新 • • 發佈:2020-02-08
我們有的專案使用的是老的vue-cli腳手架生成的,今天想寫點東西,發現.vue檔案裡面 style
裡面寫的樣式都不生效了,很自然就想到是不是loader的問題。
在這種專案的webpack.base.config.js一般設定loader的
rules: [ ...(config.dev.useEslint ? [createLintingRule()] : []),{ test: /\.vue$/,loader: 'vue-loader',options: vueLoaderConfig },{ test: /\.js$/,loader: 'babel-loader',include: [resolve('src'),resolve('test')] },... }
很顯然,我們在.vue檔案裡面的樣式怎麼生效跟.vue的這個loader有關了。
上面的 vueLoaderConfig
是對 vue-loader
的配置
打印出來如下:
通過閱讀/build/utils.js的原始碼我們很容易知道上面返回的 loaders
就是針對 css
、 postcss
等的物件,每一項的值是一個數組,它是類似於 [css-loader資訊,postcss-loader資訊]
的陣列,並且第一個是css-loader資訊,由於是loader的載入順序是從右到左的,所以最後一個使用的是css-loader。
以前這樣寫是沒有問題,現在開啟好久不用的老專案刪除node-modules後重新安裝發現問題,我猜測多半是vue-loader之類的升級版本了,畢竟我們使用的 package.json
package.json
裡面寫的版本。
解決方案
方法一
現在只用再加上vue-style-loader即可,也就是使用[vue-style-loader資訊,css-loader資訊,postcss-loader資訊]即可。
我們可以更改.vue的loader相關配置
{ test: /\.vue$/,// options: vueLoaderConfig options: { loaders: { 'scss': 'vue-style-loader!css-loader!sass-loader','sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' } } },
方法二
也可以更改/build/utils.js裡面,講預設的css-loader改一下,在前面加入vue-style-loader即可
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。