I updated my project from NG7 to NG9.
While i was in NG7 i used to load themes (i have a global styles.scss and inside themes i have different
colors to overide), dynamically when my app was served by using the style-loader like this:
require('style-loader!./../cssThemes/' + environment.MY_CUSTOM_THEME); (where environment.MY_CUSTOM_THEME is the name of theme.scss) and then the style-loader, load my custom theme on a <style> tag inside <head> tag.
Now that i am in NG9 (9.0.4) (typescript 3.7.5), this functionality stopped working.
Does anyone has the same problem? OR maybe has a different solution to provide?
Stackblitz instance: https://stackblitz.com/edit/angular-zkc9yt
I found what was the problem. When i updated my project through angular cli, the dependencies of style-loader and css-loader was not updated. As a result these dependencies did not work properly (posibbly of the node version , i was in node 7.X and upgraded to 13.X). So i updated them and the problem is now fixed.
Related
I'm migrating from my Vue 2 / Webpack 4 setup to Vue 3 / Webpack 5.
Here's my boilerplate code on GitHub, so far. It's a VS.NET project, making use of NPM Task Runner to watch and auto-transpile my vue files.
It works for the most part, save for the fact that the CSS isn't properly scoped. It does scope the injected CSS (with attributes such as 'data-v-37bfa8da'), but it doesn't apply this scoping to the HTML elements.
Ergo, the CSS isn't applied at all.
It does get applied when I leave out the 'scoped' attribute in my .vue file's CSS. But then my CSS is global: not scoped at all. But on production, you really do need automated CSS scoping.
I've tried the most often suggested fixes on SO (link 1, link 2), but nothing works:
set esModule to false in css-loader
replace vue-style-loader by style-loader
add '*.vue' to the sideEffects prop in package.json
The first suggestion is currently applied in the GitHub repo's source. The others are not.
Another person, outside of SO, showed me a working setup where he used esbuild-loader. I tried this. Also doesn't work for me.
All packages are up to date. So is my NodeJS.
I don't have so much experience with Webpack. It could be any setting in any package. I could be searching for an answer for a long time.
Is there anybody on here more experienced in Webpack, who is able to find a solution to my problem more quickly?
The fix is to add Vue as an external to webpack.config.js.
externals: {
vue: 'Vue'
}
I installed the plugin #tailwindcss/line-clamp, but its not working its not being suggested by intellisense and even when I type in the class manually it doesn't change my styling .
here is my tailwind config :
module.exports = {
content: ['./src/**/*.tsx', './src/**/*.ts'],
plugins: [require('#tailwindcss/forms'), require('#tailwindcss/line-clamp')],
}
btw this a typescript React project .
This same thing happend with me as well. For me I was using tailwind alongside with daisyUI and sometimes the vscode pulgin was working sometimes not.
One thing you can follow, make sure to use the tailwind docs Taiwind Docs and follow the instruction on how to install tailwind for your project as per the framework you are using. Give it a try.
Or if it's not working you can try installing the below extention along side with tailwind extention in vscode.
HTML CSS Support
You can also try to add the below in your settings.json. It worked for me actally.
"editor.quickSuggestions": {
"strings": true
}
For more on this one - Stack Overflow
answered here https://stackoverflow.com/a/72731657/12763140
The extension HTML CSS Support extension is not the correct way to go.you should follow the official installation section of the detail page in the extension page in VSC.
In order for the extension to activate you must have tailwindcss installed and a Tailwind config file named tailwind.config.js or tailwind.config.cjs in your workspace.
so adding a file (even empty) named tailwind.config.js or tailwind.config.cjs at the root of your app will make it work.
I have had a big problem for some time now.
I'm working on ReactJS with Material-UI, I have a library (which I build with webpack) and then use it on my projects.
The problem is that in local or on StoryBook, the style renders perfectly well. But when the library is built and added to my project via my package.json my style does not apply.
I override the style directly on my css file and I don't go through withStyle/useStyle/makeStyle. I know this is the right way to do it but unfortunately the project was already like that when I got it back
On StoryBook:
And prod:
If anyone has a solution or has seen this somewhere?
Thanks
I want Next.js 7 support for css-modules & normal css at the same time, same behaviour as CRA.
I found this: https://gist.github.com/Grsmto/8e7ade37862f1c8b4d019da8dd423450
. But it not work with NextJS 7. They use mini-css-extract-plugin there.
So what's the solution ?
Follow these steps:
Add your normal css file in Head component (next/head) for every required component
You can directly put it in the _app.js file if it is common between all
Then load your css module in next.config.js file as explained here
I have a web application that uses Bootstrap 3. I'm using webpack, so I npm installeded bootstrap, and I'm referencing it like so:
import 'bootstrap/dist/css/bootstrap.css';
This works well. But now I want to use a different bootstrap theme (Slate), that only changes the css file.
I can think of two options of doing this.
Replace bootstrap.css inside the node_modules directory. Since node_modules is not a part of our source repo, we will need to do this repeatedly. This is clearly not a good option.
Don't use npm for bootstrap at all - put all the bootstrap files in a folder and reference that instead. This will work, but we won't get updates if a new version of Bootstrap is released.
Is there a way to reference bootstrap.css from one place, and all the other bootstrap files from another place? Can webpack do that?