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

Question

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

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

感谢您的帮助。

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

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

How to place all the css code from .vue files into one .css file?

javascript

node.js

vue.js