请问怎样把vue组件中的写的css合并成一个css

Question

假设一个页面引用了三个组件，那么在组装成的页面中，会有三个style页面内的样式。怎样能够组装成一个css。
或者有没有根据vue来的，规划项目中的css的实例。

Answer 1

你可以使用gulp来实现，也可以使用webpack来实现。

我推荐使用webpack，借助插件ExtractTextPlugin来实现。

以vue-cli脚手架生成的webpack-simple模板配置文件为例：

var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    resolveLoader: {
        root: path.join(__dirname, 'node_modules'),
    },
    module: {
        loaders: [{
            test: /\.vue$/,
            loader: 'vue'
        }, {
            test: /\.js$/,
            loader: 'babel',
            exclude: /node_modules/
        }, {
            test: /\.json$/,
            loader: 'json'
        }, {
            test: /\.html$/,
            loader: 'vue-html'
        }, {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'url',
            query: {
                limit: 10000,
                name: '[name].[ext]?[hash]'
            }
        }, {
            test: /\.(eot|svg|ttf|woff|woff2)$/,
            loader: 'file?name=public/fonts/[name].[ext]'
        }, {
            test: /\.css$/,
            loaders: ExtractTextPlugin.extract("style", "css")
        }]
    },
    devServer: {
        historyApiFallback: true,
        noInfo: true
    },
    devtool: '#eval-source-map',
    vue: {
        loaders: {
            css: ExtractTextPlugin.extract("css")
        }
    }
}

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
        // http://vuejs.github.io/vue-loader/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new webpack.optimize.OccurenceOrderPlugin()
    ])
}

Answer 2

我用的webpack这是我一个很简单的样例demo,你可以参看下https://github.com/TIGERB/easy-vue互相学习

Answer 3

推荐使用官方的项目构建工具，vue-cli