如何将 .vue 文件中的所有 css 代码放入一个 .css 文件中？答案

【问题标题】：How to place all the css code from .vue files into one .css file?如何将 .vue 文件中的所有 css 代码放入一个 .css 文件中？
【发布时间】：2016-03-24 01:08:30
【问题描述】：

我正在启动 VueJS，我从原始 Vue Loader Example 开始我的代码并测试运行 npm run dev 或 npm run build 但出现了一个问题：有没有办法将组件中的所有 css 放在一个地方（如styles.min.css）。

我在 package.json 中添加了 bootstrap 作为依赖项，但是当我执行 npm run build 时，我只能在 dist 中找到 build.js 文件，仅此而已。

感谢您的帮助。

【问题讨论】：

您为什么要这样做... Vue 组件，如 React 组件，可以将组件的所有内容放在一个地方...如果您想创建单个 css 文件。 .那么就不要使用组件..
这没有意义：即使我使用 Vue.js 组件，也会生成一个 build.js 文件。为什么它不会对 css 做同样的事情？
如果您检查任何元素的所有有效 css 的源，那么对于 vue 组件，它只是 <style></style> 而不是您想要生成的任何其他文件。我的意思不是为什么它不会为你做......如果你想将你的css放在一个单独的文件中，那么只需创建一个......有什么问题？也有很多构建工具......
我相信我们说的不是同一件事。我想要的是将html页面中内联的所有<style></style>合并，从*.vue文件生成，在一个外部.css文件中。我也确定有用于此的工具，因此我的问题:)
问题：你为什么要这样做？答案：IE11

标签： javascript node.js vue.js

【解决方案1】：

有一个插件可以解决这个问题

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")
  ]
}

【讨论】：

我无法让它与多个入口点设置一起使用。 style.css 不断被覆盖。