Vue.js + Webpack多种风格的tas输出

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文档。