快捷導(dǎo)航

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

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

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

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

在這種項(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 的配置

打印出來(lái)如下：

通過(guò)閱讀/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ě)是沒(méi)有問(wèn)題，現(xiàn)在打開(kāi)好久不用的老項(xiàng)目刪除node-modules后重新安裝發(fā)現(xiàn)問(wèn)題，我猜測(cè)多半是vue-loader之類的升級(jí)版本了，畢竟我們使用的 package.json 默認(rèn)并沒(méi)有鎖定版本。我們安裝的很可能并不是我們?cè)?package.json 里面寫(xiě)的版本。

解決方案

方法一

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