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 默認(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)文章
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)圖書管理小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
watch就是當(dāng)值第一次綁定的時候，是不會執(zhí)行監(jiān)聽函數(shù)的，只有值誕生改變才會執(zhí)行。如果需要在第一次綁定的時候也執(zhí)行函數(shù)，則需要用到immediate屬性，比如當(dāng)父組件向子組件動態(tài)傳值時，子組件props首次獲取到父組件傳來的No認(rèn)知時，也需要執(zhí)行函數(shù)2023-01-01
Vue中除了內(nèi)置指令,也允許注冊自定義的指令,下面這篇文章主要給大家介紹了關(guān)于Vue3.0寫自定義指令的相關(guān)資料,需要的朋友可以參考下2021-06-06
關(guān)于vue項目部署后刷新網(wǎng)頁報404錯誤解決
這篇文章主要介紹了關(guān)于vue項目部署后刷新網(wǎng)頁報404錯誤解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
淺析vue偵測數(shù)據(jù)的變化之基本實現(xiàn)
這里涉及到Vue一個重要特性：響應(yīng)式系統(tǒng)。數(shù)據(jù)模型只是普通的 JavaScript對象，當(dāng)我們修改時，視圖會被更新，而變化偵測是響應(yīng)式系統(tǒng)的核心2021-06-06
前端設(shè)置cookie之vue-cookies使用及說明
這篇文章主要介紹了前端設(shè)置cookie之vue-cookies使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue自定義密碼輸入框解決瀏覽器自動填充密碼的問題(最新方法)
這篇文章主要介紹了vue自定義密碼輸入框解決瀏覽器自動填充密碼的問題,通過將密碼輸入框的type設(shè)置為text，修改樣式上的顯示，來實現(xiàn)既可以讓瀏覽器不自動填充密碼，又可以隱藏密碼的效果，需要的朋友可以參考下2023-04-04
Vue3?封裝?Element?Plus?Menu?無限級菜單組件功能的詳細(xì)代碼
本文分別使用?SFC（模板方式）和?tsx?方式對?Element?Plus?*el-menu*?組件進(jìn)行二次封裝，實現(xiàn)配置化的菜單，有了配置化的菜單，后續(xù)便可以根據(jù)路由動態(tài)渲染菜單，對Vue3?無限級菜單組件相關(guān)知識感興趣的朋友一起看看吧2022-09-09
這篇文章主要介紹了如何使用RoughViz可視化Vue.js中的草繪圖表，幫助大家更好的理解和使用roughViz，感興趣的朋友可以了解下2021-01-01
Vite默認(rèn)集成了對Sass的支持,你只需要安裝Sass本身即可,這篇文章主要介紹了vite 項目中如何使用Sass,需要的朋友可以參考下2024-04-04