Closed utterances-bot closed 3 years ago
Hi Marc. Thanks for a great post. I'm trying to follow this guide in a project using the Angular CLI. We are using the Angular CLI feature of having multiple projects. When I everything described above, I get the error that postcss-import can't resolve my styles.scss
file - it's looking in the wrong directory. I have created a SO quesiton. If you have any ideas what's going on, I would be very thankfull 🙏 https://stackoverflow.com/q/63265225/3694288
@alexbjorlig Hi Alex, do you have an example repo for me to have a look at to reproduce your error?
We are using this also for notiz.dev. Have a look in our angular.json. We configured the "builder": "ngx-build-plus:browser",
for two applications notiz and shortcodes.
Thanks for the quick reply, I will get started with the creation of a repo so the error can be reproduced.
I followed this walkthrough and was getting an error stating that plugins was not a valid option for postcss. I think postcss-loader may have been updated since this was written so I wanted to share what worked for me. I had to update my webpack.config.js to look like this:
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loader: "postcss-loader",
options: {
postcssOptions: {
ident: "postcss",
syntax: "postcss-scss",
plugins: [
require("postcss-import"),
require("tailwindcss"),
require("autoprefixer"),
],
},
},
},
],
},
};
Just wanted to share in case it helps anyone else.
@phileagleson Awesome, thank you! We will update the guide.
Hey Mark
i have some issue in install tailwind in angular 10.
This is the error in tailwind please help me for solving.
"ERROR in ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./node_modules/postcss-loader/dist/cjs.js??postcss!./src/styles.scss) Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
ERROR in Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
@btpatelmobio which version of postcss-loader
are you using? If you are on version 4.0 please try @phileagleson update for the webpack.config.js as the options have been update
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loader: 'postcss-loader',
options: {
- ident: 'postcss',
- syntax: 'postcss-scss',
- plugins: () => [
- require('postcss-import'),
- require('tailwindcss'),
- require('autoprefixer'),
- ],
+ postcssOptions: {
+ ident: 'postcss',
+ syntax: 'postcss-scss',
+ plugins: [
+ require('postcss-import'),
+ require('tailwindcss'),
+ require('autoprefixer'),
],
},
},
},
],
},
};
Hi Mark
Thanks for the big support.
Thanks for the blog, It was working absolutly fine for me but one day it started giving me error when checked your blog again came to know that need to change the extra webpack.config.js but still I am getting the below error
[error] WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
below is my package.json file { "name": "pariksha", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~10.0.4", "@angular/common": "~10.0.4", "@angular/compiler": "~10.0.4", "@angular/core": "~10.0.4", "@angular/forms": "~10.0.4", "@angular/platform-browser": "~10.0.4", "@angular/platform-browser-dynamic": "~10.0.4", "@angular/router": "~10.0.4", "@garygrossgarten/ngx-tailwind": "^0.2.0", "keycloak-angular": "^8.0.1", "keycloak-js": "^11.0.2", "ng-katex": "^2.0.3", "rxjs": "~6.5.5", "tslib": "^2.0.0", "zone.js": "~0.10.3" }, "devDependencies": { "@angular-devkit/build-angular": "~0.1000.3", "@angular/cli": "~10.0.3", "@angular/compiler-cli": "~10.0.4", "@types/node": "^12.11.1", "@types/jasmine": "~3.5.0", "@types/jasminewd2": "~2.0.3", "codelyzer": "^6.0.0", "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~5.0.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~3.3.0", "karma-jasmine-html-reporter": "^1.5.0", "ngx-build-plus": "latest", "postcss-import": "latest", "postcss-loader": "latest", "postcss-scss": "latest", "protractor": "~7.0.0", "tailwindcss": "latest", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~3.9.5" } }
below is the webpack.config module.exports = { module : { rules : [ { test: /.scss$/, loader: 'postcss-loader', postcssOptions: { ident: 'postcss', syntax: 'postcss-scss', plugins: [ require('postcss-import'), require('tailwindcss'), require('autoprefixer'), ], }, }, ], }, }
Is it because in my package.json I see latest as the version and not anything specific? Please help
@rakesh-banneret do you have reproduction repo? Much easier to help you out, otherwise I suggest you create a new Angular project and start over with all steps. One note postcss-import
in version 13.0.0 breaks currently the build, thus use version 12.0.1. Check out ngx-tailwind.
Thank you very much.
Really appreciate your help. I will tey to create new in case I have issue I will share repo with you.
Regards Rakesh
Get Outlook for Androidhttps://aka.ms/ghei36
From: Marc notifications@github.com Sent: Wednesday, October 28, 2020 2:09:53 PM To: notiz-dev/notiz notiz@noreply.github.com Cc: Rakesh Kumar rkumar24@live.com; Mention mention@noreply.github.com Subject: Re: [notiz-dev/notiz] Angular 10 with Tailwind CSS (#111)
@rakesh-bannerethttps://github.com/rakesh-banneret do you have reproduction repo? Much easier to help you out, otherwise I suggest you create a new Angular project and start over with all steps. One note postcss-import in version 13.0.0 breaks currently the build, thus use version 12.0.1. Check out ngx-tailwindhttps://github.com/notiz-dev/ngx-tailwind.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/notiz-dev/notiz/issues/111#issuecomment-717783837, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AQLC6LRNL4USZQ24EWN4B5TSM7KFTANCNFSM4PV36XJA.
Hmmm. I'm using angular 11.0.2, tailwindcss 2.0.1. I didn't encounter issues running the app but the page doesn't apply the styles. https://imgur.com/gZrP4Lw
@iryanjan18 can you provide a reproduction repository?
@iryanjan18 can you provide a reproduction repository?
Here's my newly created repo: https://github.com/iryanjan18/angular-tailwind
@iryanjan18 I see you are using @angular-builders/custom-webpack
, in this blog post and also the schematics ngx-tailwind are using ngx-build-plus
instead. Can you try it out with ngx-build-plus
instead of @angular-builders/custom-webpack
, you can use it easily in a new project via the schematics.
Additionally, when I run ng serve
in your project the following log indicates that PostCSS cannot pickup any plugin including Tailwind.
You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
Hi ,
Thanks for your help. It is a private repo but I can try the things you told in couple of days and let you know.
Regards Rakesh
Get Outlook for Androidhttps://aka.ms/ghei36
From: Ryan Jan Borja notifications@github.com Sent: Monday, November 23, 2020 1:21:24 PM To: notiz-dev/notiz notiz@noreply.github.com Cc: Rakesh Kumar rkumar24@live.com; Mention mention@noreply.github.com Subject: Re: [notiz-dev/notiz] Angular 10 with Tailwind CSS (#111)
@iryanjan18https://github.com/iryanjan18 can you provide a reproduction repository?
Here's my newly created repo: https://github.com/iryanjan18/angular-tailwind
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/notiz-dev/notiz/issues/111#issuecomment-731989428, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AQLC6LVU3YQMRLFRNX5ZW7LSRIH7ZANCNFSM4PV36XJA.
Hey!
Thanks a lot for your tutorial. Is there anyway we could still get "intellisense" working in Jetbrains Editors for example. And out of interest, which editor are you using?
@BeerGrizzly awesome thanks 👍 !! I am using VS Code together with tailwind-intellisense. I read recently that Webstorm 2020.3 has added Tailwind intellisense support. If you are using any other JetBrains IDE you can install the Tailwind CSS Plugin.
Hopefully you can find something useful for your setup 🤞
Angular 10 with Tailwind CSS
Learn how to style Angular applications with Tailwind CSS
https://notiz.dev/blog/angular-10-with-tailwindcss