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

更新時(shí)間：2020年02月07日 09:01:23 作者：道招

這篇文章主要介紹了vue-cli設(shè)置css不生效的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

我們有的項(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 的配置

打印出來如下：

通過閱讀/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即可

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

您可能感興趣的文章:

相關(guān)文章

Vue匿名插槽與作用域插槽的合并和覆蓋行為
這篇文章主要介紹了Vue基礎(chǔ)-匿名插槽與作用域插槽的合并和覆蓋行為 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-04-04
使用element-ui的Pagination分頁的注意事項(xiàng)及說明
這篇文章主要介紹了使用element-ui的Pagination分頁的注意事項(xiàng)及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
Element?Plus修改表格行和單元格樣式詳解
在使用Element Plus中的table組件展示數(shù)據(jù)時(shí),由于需要對(duì)表格行內(nèi)數(shù)據(jù)的數(shù)據(jù)進(jìn)行修改,下面這篇文章主要給大家介紹了關(guān)于Element?Plus修改表格行和單元格樣式的相關(guān)資料,需要的朋友可以參考下
2022-04-04
基于Vue+ECharts實(shí)現(xiàn)地圖展示與交互
這篇文章中,我將逐步介紹如何使用 Vue 和 ECharts 實(shí)現(xiàn)一個(gè)互動(dòng)式的地圖展示組件,其中支持返回上一層地圖、點(diǎn)擊查看不同城市的詳細(xì)信息,以及根據(jù)數(shù)據(jù)動(dòng)態(tài)展示不同的統(tǒng)計(jì)信息,感興趣的小伙伴跟著小編一起來看看吧
2025-02-02
Vue Element-UI中el-table實(shí)現(xiàn)單選的示例代碼
在element-ui中是為我們準(zhǔn)備好了可直接使用的單選與多選屬性的,本文主要介紹了Vue Element-UI中el-table實(shí)現(xiàn)單選的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下
2023-12-12
vue3+elementui-plus實(shí)現(xiàn)一個(gè)接口上傳多個(gè)文件功能
這篇文章主要介紹了vue3+elementui-plus實(shí)現(xiàn)一個(gè)接口上傳多個(gè)文件,先使用element-plus寫好上傳組件，然后假設(shè)有個(gè)提交按鈕，點(diǎn)擊上傳文件請(qǐng)求接口，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-07-07
Vue.js實(shí)例方法之生命周期詳解
這篇文章主要給大家介紹了關(guān)于Vue.js實(shí)例方法之生命周期的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。
2017-07-07
koa2+vue實(shí)現(xiàn)登陸及登錄狀態(tài)判斷
這篇文章主要介紹了koa2+vue實(shí)現(xiàn)登陸及登錄狀態(tài)判斷，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-08-08
vuex刷新之后數(shù)據(jù)丟失,數(shù)據(jù)持久化,vuex-persistedstate問題
這篇文章主要介紹了vuex刷新之后數(shù)據(jù)丟失,數(shù)據(jù)持久化,vuex-persistedstate問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
vant4 封裝日期段選擇器的實(shí)現(xiàn)
本文主要介紹了vant4 封裝日期段選擇器的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-03-03