要实现Angular CLI对Less的跨浏览器支持,可以按照以下步骤进行:
安装Less依赖库:
npm install less --save-dev
在.angular-cli.json
文件中配置Less作为样式预处理器:
{
"apps": [
{
"styles": [
"styles.less"
]
}
]
}
在项目根目录下创建一个styles.less
文件,并在其中编写Less样式代码。例如:
@primary-color: #007bff;
.my-class {
color: @primary-color;
}
在组件的样式文件中使用Less样式。例如,在app.component.css
文件中:
@import '../styles.less';
.my-component {
.my-class;
}
修改angular.json
文件,将styles
选项更改为less
:
"styles": [
"src/styles.less"
],
安装@angular-builders/custom-webpack
依赖库:
npm install @angular-builders/custom-webpack --save-dev
在项目根目录创建一个webpack.config.js
文件,并添加以下内容:
const less = require('less');
module.exports = {
module: {
rules: [
{
test: /\.less$/,
loader: 'less-loader',
options: {
implementation: less
}
}
]
}
}
修改angular.json
文件,使用自定义webpack配置:
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./webpack.config.js"
},
// ...
}
}
}
这样配置后,Angular CLI将会使用Less作为样式预处理器,并能够正常编译和跨浏览器支持Less样式。