vue-cli設(shè)置css不生效的解決方法
我們有的項目使用的是老的vue-cli腳手架生成的，今天想寫點東西，發(fā)現(xiàn).vue文件里面 style 里面寫的樣式都不生效了，很自然就想到是不是loader的問題。
在這種項目的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的這個loader有關(guān)了。
上面的 vueLoaderConfig 是對 vue-loader 的配置
打印出來如下：
通過閱讀/build/utils.js的源碼我們很容易知道上面返回的 loaders 就是針對 css 、 postcss 等的對象，每一項的值是一個數(shù)組，它是類似于 [css-loader信息, postcss-loader信息] 的數(shù)組，并且第一個是css-loader信息，由于是loader的加載順序是從右到左的，所以最后一個使用的是css-loader。
以前這樣寫是沒有問題，現(xiàn)在打開好久不用的老項目刪除node-modules后重新安裝發(fā)現(xiàn)問題，我猜測多半是vue-loader之類的升級版本了，畢竟我們使用的 package.json 默認并沒有鎖定版本。我們安裝的很可能并不是我們在 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里面，講默認的css-loader改一下，在前面加入vue-style-loader即可
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue基礎(chǔ)-匿名插槽與作用域插槽的合并和覆蓋行為 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
使用element-ui的Pagination分頁的注意事項及說明
這篇文章主要介紹了使用element-ui的Pagination分頁的注意事項及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
在使用Element Plus中的table組件展示數(shù)據(jù)時,由于需要對表格行內(nèi)數(shù)據(jù)的數(shù)據(jù)進行修改,下面這篇文章主要給大家介紹了關(guān)于Element?Plus修改表格行和單元格樣式的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章中,我將逐步介紹如何使用 Vue 和 ECharts 實現(xiàn)一個互動式的地圖展示組件,其中支持返回上一層地圖、點擊查看不同城市的詳細信息,以及根據(jù)數(shù)據(jù)動態(tài)展示不同的統(tǒng)計信息,感興趣的小伙伴跟著小編一起來看看吧2025-02-02
Vue Element-UI中el-table實現(xiàn)單選的示例代碼
在element-ui中是為我們準備好了可直接使用的單選與多選屬性的,本文主要介紹了Vue Element-UI中el-table實現(xiàn)單選的示例代碼,具有一定的參考價值,感興趣的可以了解一下2023-12-12
vue3+elementui-plus實現(xiàn)一個接口上傳多個文件功能
這篇文章主要介紹了vue3+elementui-plus實現(xiàn)一個接口上傳多個文件,先使用element-plus寫好上傳組件，然后假設(shè)有個提交按鈕，點擊上傳文件請求接口，本文結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-07-07
這篇文章主要給大家介紹了關(guān)于Vue.js實例方法之生命周期的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編一起來學習學習吧。2017-07-07
koa2+vue實現(xiàn)登陸及登錄狀態(tài)判斷
這篇文章主要介紹了koa2+vue實現(xiàn)登陸及登錄狀態(tài)判斷，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-08-08
vuex刷新之后數(shù)據(jù)丟失,數(shù)據(jù)持久化,vuex-persistedstate問題
這篇文章主要介紹了vuex刷新之后數(shù)據(jù)丟失,數(shù)據(jù)持久化,vuex-persistedstate問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
本文主要介紹了vant4 封裝日期段選擇器的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-03-03