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

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

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

谢谢你的帮助。

来源

2015-12-17 Cyril N.

为什么你想这样做... Vue的组件，如反应的组分有一种方法将一个组件的所有内容放在一个地方......如果你想创建一个单独的css文件..那么就不要使用组件.. – notANerdDev

这没有任何意义：即使我使用Vue.js组件，生成一个build.js文件。为什么它不会为CSS做同样的事情？ –

如果您检查所有元素的所有css的源代码，那么对于vue组件，它只是''而不是您想要生成的任何其他文件。我的观点不是为什么它不会为你做...如果你想让你的CSS在一个单独的文件，然后创建一个...有什么问题？也有很多构建工具。 – notANerdDev

有针对

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

来源

2015-12-20 17:15:18

我无法得到这与多入口点设置工作。 'style.css'不断被覆盖。 – Doom5

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

回答

相关问题