vue-cli設(shè)置css不生效的解決方法
我們有的項(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')]
},
...
}
很顯然，我們在.vue文件里面的樣式怎么生效跟.vue的這個(gè)loader有關(guān)了。
上面的 vueLoaderConfig 是對 vue-loader 的配置
打印出來如下：
通過閱讀/build/utils.js的源碼我們很容易知道上面返回的 loaders 就是針對 css 、 postcss 等的對象，每一項(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)問題，我猜測多半是vue-loader之類的升級版本了，畢竟我們使用的 package.json 默認(rèn)并沒有鎖定版本。我們安裝的很可能并不是我們在 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即可
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue基礎(chǔ)-匿名插槽與作用域插槽的合并和覆蓋行為 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
使用element-ui的Pagination分頁的注意事項(xiàng)及說明
這篇文章主要介紹了使用element-ui的Pagination分頁的注意事項(xiàng)及說明,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
在使用Element Plus中的table組件展示數(shù)據(jù)時(shí),由于需要對表格行內(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è)互動式的地圖展示組件,其中支持返回上一層地圖、點(diǎn)擊查看不同城市的詳細(xì)信息,以及根據(jù)數(shù)據(jù)動態(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)擊上傳文件請求接口，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
這篇文章主要給大家介紹了關(guān)于Vue.js實(shí)例方法之生命周期的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(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à)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
本文主要介紹了vant4 封裝日期段選擇器的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03