如何解决如何用angular,ng-zorro-antd和更少的配置Tailwind CSS?
我正在尝试使用Taiwind CSS
和Angular
将ng-zorro-antd
集成到less
项目中。
我遇到错误:
ERROR in ./src/styles.less (./node_modules/css-loader/dist/cjs.js??ref--15-1!./node_modules/postcss-loader/src??embedded!./node_modules/less-loader/dist/cjs.js??ref--15-3!./node_modules/postcss-loader/src??postcss!./src/styles.less)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find './themes/index'
in [
/Users/iguissouma/idea/test-ant-less-tailwind/node_modules/ng-zorro-antd/style
]
at resolveModule.catch.catch (/Users/iguissouma/idea/test-ant-less-tailwind/node_modules/postcss-import/lib/resolve-id.js:35:13)
** Angular Live Development Server is listening on localhost:4200,open your browser on http://localhost:4200/ **
使用angular-cli
构建并添加了ng-zorro-antd
@nartc/tailwind-schematics
原理图的示例project-repo。
有什么办法解决这个问题吗?
解决方法
感谢您提到我的jira clone项目!没错,我只是从Jira clone中的ng-zorro导入CSS,但是使用SCSS语法编写的新样式。我记得我还必须include sass-loader才能在webpack配置中正常工作。
我下载了您的源代码,并遇到了完全相同的问题。
我也开始将less-loader添加到项目中。我认为减少加载程序是必要的,因为如果仅运行少过postcss的脚本,那将是不够的。他们不一样。
npm install less less-loader --save-dev
这就是它的外观。较少的javascriptEnabled选项是从ant发行的一个问题中获得的。
https://github.com/ant-design/ant-motion/issues/44
module.exports = {
module: {
rules: [
{
test: /\.less$/,use: [
{
loader: "postcss-loader",options: {
ident: "postcss",syntax: "postcss-less",plugins: () => [
require("postcss-import"),require("tailwindcss")("./tailwind.config.js"),require("autoprefixer"),],},{
loader: "less-loader",options: {
lessOptions: {
javascriptEnabled: true,};
它经历了buld过程,但花了将近10分钟,请看屏幕截图上的五十万毫秒。不知道为什么花了这么长时间。您找到其他更好的解决方案了吗?
,作为替代方案,您可以在角度项目中使用scss,而仅在ng-zorro主题样式中使用。然后在angular.json中同时包含styles.scss和theme.less文件。
在styles.scss文件中添加这些顺风,并且与@ trungk18的jira clone项目具有完全相同的webpack.config.js。
基本上,解决方案是让angular处理scss并减少样式,您的额外自定义webpack只需要处理顺风的scss格式。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。