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

Question

我正在启动VueJS，我从原始的Vue Loader示例开始了我的代码，并测试了运行情况npm run dev，npm run build但还是出现了一个问题：是否有一种方法可以将组件中的所有css放在一个位置（如styles.min.css）。

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

谢谢您的帮助。

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