要在Angular项目中启用CSS模块化,可以通过自定义webpack配置来实现。下面是一个示例解决方法:
在项目根目录下创建一个名为webpack.config.js
的文件。
在webpack.config.js
文件中添加以下内容:
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true, // 启用CSS模块化
importLoaders: 1
}
},
]
}
]
},
plugins: [
new MiniCssExtractPlugin()
]
};
npm install mini-css-extract-plugin --save-dev
angular.json
文件中修改architect > build > options > styles
配置,将styles
数组中的路径改为src/styles.css
。例如:"styles": [
"src/styles.css"
],
src
目录下创建一个名为styles.css
的文件,并添加以下内容:/* styles.css */
.hello {
color: red;
}
// app.component.ts
import { Component } from '@angular/core';
import * as styles from './app.component.css';
@Component({
selector: 'app-root',
template: `
Hello Angular
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {}
ng serve
现在,CSS模块化已经启用,h1
元素将应用.hello
样式,其颜色为红色。