javascript - Tailwindcss 2 样式在 Angular 11 中不起作用
问题描述
我正在尝试将 Tailwindcss 用于一个新的 Angular 11 项目。我安装了以下开发包。
NOTE: Removed other packages for simplicity
"@angular-builders/custom-webpack": "^10.0.1",
"@angular-devkit/build-angular": "~0.1100.2",
"@angular/cli": "~11.0.2",
"@angular/compiler-cli": "~11.0.1",
"autoprefixer": "^10.0.2",
"postcss-import": "^13.0.0",
"postcss-loader": "^4.1.0",
"postcss-scss": "^3.0.4",
"tailwindcss": "^2.0.1",
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')
]
}
}
}
]
}
}
样式.scss
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
角.json
"builder": "@angular-builders/custom-webpack:browser", //dev-server
"customWebpackConfig": { "path": "webpack.config.js" }
我添加了这段代码,app.component.html
但它似乎无法识别样式。
...... some codes not included
<div class="px-6 pb-4 space-x-2">
<a href="https://angular.io" target="_blank" rel="noreferrer"
class="inline-block bg-red-500 rounded-full px-3 py-1 text-sm font-semibold text-white hover:bg-red-700">
#angular
</a>
<a href="https://tailwindcss.com" target="_blank" rel="noreferrer"
class="inline-block bg-indigo-500 rounded-full px-3 py-1 text-sm font-semibold text-white hover:bg-indigo-700">
#tailwind
</a>
<a href="https://notiz.dev" target="_blank" rel="noreferrer"
class="inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 hover:bg-blue-400">
#notiz
</a>
</div>
解决方案
您可以更新到 beta 版本 @angular-builders/custom-webpack。它在您的angular.json中有新的变化,customWebpackConfig部分现在应该像这样
"customWebpackConfig": {
"path": "./webpack.config.js",
"mergeRules": {
"module": {
"rules": "append"
}
}
}
webpack.config.js 你的加载器应该像
let sass;
try {
sass= require('node-sass');
} catch {
sass= require('sass');
}
module.exports = {
node: {
fs: 'empty'
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'postcss-loader',
options: {
postcssOptions: {
ident: 'postcss',
syntax: 'postcss-scss',
plugins: [
"postcss-import",
"tailwindcss",
"autoprefixer"
]
}
}
},
{
loader: 'sass-loader',
options: {
implementation: sass,
sourceMap: false,
sassOptions: {
precision: 8
}
}
}
]
}
]
}
};
您可以在angular-builders上阅读更多相关信息
还有你需要的包
- “postcss”:“^8.2.1”
- “postcss 导入”:“^14.0.0”
- “postcss-loader”:“^4.1.0”
- “postcss-scss”:“^3.0.4”
- "tailwindcss": "^2.0.2"
- “自动前缀”:“^10.1.0”
- "@angular-builders/custom-webpack": "^11.0.0-beta.4"
推荐阅读
- continuous-integration - bitbucket-pipelines.yml 文件中的部署环境“暂存”在管道中多次出现
- javascript - v-menu 在看到 v-list-item onclick 之前关闭
- laravel - livewire 类型提示的清洁解决方案
- r - Hadley 将 dbplyr 用于较小的数据集是什么意思?
- tsql - 如果 try_parse 出错,如何返回 null
- python - 无法在 Raspberry Pi 4 中初始化两个 VideoCapture 实例
- reactjs - Storybook 打破了现有 Nextjs/React 应用程序的图像加载
- animation - 如何更改 svg 的文本
- autoit - Auto It 脚本调试
- c# - 无法读取 API 响应内容