Vue.js + Webpack多樣式測試輸出

Question

我有幾個vue.js組件，用單頁面組件格式編寫。

對於每個.vue文件，我都沒有特別爲那個頁面編寫。

捆綁後，我有幾個樣式標籤，填充全局樣式空間。因此，我的一些課程在不同的頁面上重疊。

這是vue.js和的WebPack預期的功能？

Answer 1

這是vue-loader（它是vue-webpack模板中的主要插件）的默認行爲。

但是，如果你願意，你可以提取所有CSS成一個文件：

npm install extract-text-webpack-plugin --save-dev 

---

// webpack.config.js 
var ExtractTextPlugin = require("extract-text-webpack-plugin") 

module.exports = { 
    // other options... 
    module: { 
    loaders: [ 
     { 
     test: /\.vue$/, 
     loader: 'vue' 
     }, 
    ] 
    }, 
    vue: { 
    loaders: { 
     css: ExtractTextPlugin.extract("css"), 
     // you can also include <style lang="less"> or other langauges 
     less: ExtractTextPlugin.extract("css!less") 
    } 
    }, 
    plugins: [ 
    new ExtractTextPlugin("style.css") 
    ] 
} 

退房的vue-loader關於提取的文檔。