快捷導(dǎo)航

詳解webpack打包vue時(shí)提取css

更新時(shí)間：2017年05月26日 16:44:00 作者：Inc_曉陽(yáng)

本篇文章主要介紹了詳解webpack打包vue時(shí)提取css，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

webpack打包vue項(xiàng)目的時(shí)候默認(rèn)會(huì)把vue里的css打包到頁(yè)面上。

webpack.config.js里的plugins加上以下配置

new webpack.LoaderOptionsPlugin({ 
  test:/\.vue$/, 
  options: { 
    vue: { 
      loaders: { 
        css: ExtractTextPlugin.extract({ 
        fallback:'vue-style-loader',  
        use:'css-loader', 
        publicPath:"../" 
       }), 
      } 
    } 
  } 
)

這樣可以把css提取到公共style里。

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

您可能感興趣的文章:

相關(guān)文章

vuex中能直接修改state嗎
當(dāng)我們使用vuex的時(shí)候，時(shí)不時(shí)能看到“更改Vuex中的store中的狀態(tài)唯一辦法就是提交mutations”，但是有沒(méi)有試想過(guò)，我們不提交mutations其實(shí)也能修改state的值？答案是可以的，下面通過(guò)本文介紹下vuex修改state值的方法，感興趣的朋友一起看看吧
2022-11-11
Vue.js展示AJAX數(shù)據(jù)簡(jiǎn)單示例講解
當(dāng)通過(guò)AJAX方式取回?cái)?shù)據(jù)后，使用vue.js可以完美地按一定邏輯在頁(yè)面上的展示數(shù)據(jù)，代碼簡(jiǎn)單、優(yōu)美、自然，而且便于與在用的頁(yè)面框架集成，本文給大家介紹Vue.js展示AJAX數(shù)據(jù)簡(jiǎn)單示例
2017-03-03
Vue頂部tags瀏覽歷史的實(shí)現(xiàn)
在管理系統(tǒng)中，常常需要在頂部tags顯示瀏覽歷史。本文將教大家如何通過(guò)Vue實(shí)現(xiàn)這一功能，文中的示例代碼講解詳細(xì)，需要的可以參考一下
2021-12-12
vue 解決data中定義圖片相對(duì)路徑頁(yè)面不顯示的問(wèn)題
這篇文章主要介紹了vue 解決data中定義圖片相對(duì)路徑頁(yè)面不顯示的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
vue-router為激活的路由設(shè)置樣式操作
這篇文章主要介紹了vue-router為激活的路由設(shè)置樣式操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
Echarts之圖例legend基本配置方式
這篇文章主要介紹了Echarts只圖例legend基本配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue.js實(shí)現(xiàn)用戶(hù)評(píng)論、登錄、注冊(cè)、及修改信息功能
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)用戶(hù)評(píng)論、登錄、注冊(cè)、及修改信息功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
Vue3在css中使用v-bind綁定js/ts變量(在scss和less中使用方式)
v-bind是Vue.js中的一個(gè)核心指令,用于在Vue組件或DOM元素上綁定數(shù)據(jù)屬性,下面這篇文章主要給大家介紹了關(guān)于Vue3在css中使用v-bind綁定js/ts變量的相關(guān)資料,也可以在scss和less中使用方式,需要的朋友可以參考下
2024-04-04
23個(gè)不可錯(cuò)過(guò)的Vue3實(shí)用Hook
@vueuse/core提供了豐富的功能性鉤子,使得處理常見(jiàn)的開(kāi)發(fā)任務(wù)變得更加簡(jiǎn)潔和高效,本文將詳細(xì)介紹如何在Vue3項(xiàng)目中使用?@vueuse/core及其一些極具價(jià)值的功能,需要的可以參考下
2024-11-11
vue3項(xiàng)目keepAlive使用方法詳解
keepalive是Vue的內(nèi)置組件,作用是將組件緩存在內(nèi)存當(dāng)中,防止重復(fù)渲染DOM,屬于消耗內(nèi)存獲取速度,這篇文章主要介紹了vue3項(xiàng)目keepAlive使用方法,主要將keepaliev在vue3.0中的用法,需要的朋友可以參考下
2024-03-03