新建Angular項(xiàng)目
使用Angular CLI 新建Angular v10或v11的項(xiàng)目
# 如果沒(méi)有安裝Angular/CLI, 運(yùn)行
# npm i -g @angular/cli
ng new app-name --style=scss
cd app-name
添加 Tailwind CSS和PostCSS
npm i -D tailwindcss autoprefixer postcss postcss-import postcss-loader postcss-scss
添加ngx-build-plus
ng add ngx-build-plus
在根目錄創(chuàng)建 webpack.config.js, 用來(lái)配置PostCCSS和Tailwind
# 創(chuàng)建webpack.config.js文件, 或者手動(dòng)創(chuàng)建
touch webpack.config.js
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loader: 'postcss-loader',
options: {
postcssOptions: {
ident: 'postcss',
syntax: 'postcss-scss',
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
],
},
},
},
],
},
};
初始化Tailwind配置并添加Tailwind基礎(chǔ)樣式
初始化Tailwind配置
npx tailwindcss init
或者初始化完整配置
npx tailwindcss init --full
添加Tailwind基礎(chǔ)樣式到文件 src/style.scss
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
移除多余的CSS樣式
可以使用 tailwind.config.js 中的 purge參數(shù), 移除沒(méi)有用到的樣式
module.exports = {
purge: {
content: ["./src/**/*.html", "./src/**/*.ts"],
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
注: 要移除沒(méi)有用到的樣式, 必須設(shè)置 NODE_ENV=production
windows下可以安裝cross-env
npm i -D cross-env
修改package.json
{
// ....
"scripts": {
//...,
// "start": "ng serve",
"start": "ng serve --extra-webpack-config webpack.config.js",
// "build": "ng build",
"build": "ng build --extra-webpack-config webpack.config.js",
// 新增Scripts
"build:prod": "cross-env NODE_ENV=production ng build --extra-webpack-config webpack.config.js --prod",
//...
}
//...
}
