vue-cli設(shè)置css不生效的解決方法

發(fā)布時(shí)間：2020-08-22 02:06:15 來源：腳本之家閱讀：582 作者：道招欄目：web開發(fā)

我們有的項(xiàng)目使用的是老的vue-cli腳手架生成的，今天想寫點(diǎn)東西，發(fā)現(xiàn).vue文件里面 style 里面寫的樣式都不生效了，很自然就想到是不是loader的問題。

在這種項(xiàng)目的webpack.base.config.js一般設(shè)置loader的

rules: [
   ...(config.dev.useEslint ? [createLintingRule()] : []),
   {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
   },
   {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test')]
   },
   ...
}

很顯然，我們?cè)?vue文件里面的樣式怎么生效跟.vue的這個(gè)loader有關(guān)了。

上面的 vueLoaderConfig 是對(duì) vue-loader 的配置

打印出來如下：

vue-cli設(shè)置css不生效的解決方法

通過閱讀/build/utils.js的源碼我們很容易知道上面返回的 loaders 就是針對(duì) css 、 postcss 等的對(duì)象，每一項(xiàng)的值是一個(gè)數(shù)組，它是類似于 [css-loader信息, postcss-loader信息] 的數(shù)組，并且第一個(gè)是css-loader信息，由于是loader的加載順序是從右到左的，所以最后一個(gè)使用的是css-loader。

以前這樣寫是沒有問題，現(xiàn)在打開好久不用的老項(xiàng)目刪除node-modules后重新安裝發(fā)現(xiàn)問題，我猜測(cè)多半是vue-loader之類的升級(jí)版本了，畢竟我們使用的 package.json 默認(rèn)并沒有鎖定版本。我們安裝的很可能并不是我們?cè)?package.json 里面寫的版本。

解決方案

方法一

現(xiàn)在只用再加上vue-style-loader即可，也就是使用[vue-style-loader信息, css-loader信息, postcss-loader信息]即可。
我們可以更改.vue的loader相關(guān)配置

{
    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里面，講默認(rèn)的css-loader改一下，在前面加入vue-style-loader即可

vue-cli設(shè)置css不生效的解決方法

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

vue-cli設(shè)置css不生效的解決方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽