我們有的項目使用的是老的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$/,
loader: 'vue-loader',
// 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即可
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
