我們有的專案使用的是老的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

解決方案

方法一

現在只用再加上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即可

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。