angular2 打包css

Angular2是一个流行的JavaScript框架，它提供了一种简单的方式来开发Web应用。在使用Angular2时，我们常常会用到CSS，但是当应用变得更加复杂时，我们需要对CSS进行打包，来使得应用更具有可维护性。

在Angular2中，使用webpack来进行打包，我们可以使用CSS Loader和Style Loader来加载和打包CSS文件。

// 在webpack.config.js中
module.exports = {
// 入口文件
entry: './src/main.ts',
// 输出的bundle文件
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
},
// 依赖
resolve: {
extensions: ['.ts', '.js']
},
// 模块
module: {
rules: [
{
// 加载TS文件
test: /\.ts$/,
loader: 'awesome-typescript-loader'
},
{
// 加载CSS文件
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}
]
}
}

在以上代码中，我们使用了CSS Loader和Style Loader。CSS Loader负责将CSS文件打包成一个JavaScript文件，而Style Loader则负责将CSS样式添加到head标签中。

通过以上的配置，我们就可以使用Angular2和CSS样式来开发一个更加优秀的Web应用。

查看更多关于angular2 打包css的详细内容...