css - Vue.js + Webpack 多样式tas输出

Question

我有几个 vue.js 组件，以单页组件格式编写。

对于每个 .vue 文件，我都没有为该页面编写特定内容。

捆绑后，我有几个样式标签，它们填充了全局样式空间。因此，我的一些类(class)在不同的页面上重叠。

这是 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 的文档关于提取。