I'm having a problem that is happening to me in two differentes PC's. For my project I've installed for development the following dependencies: (webpack webpack-cli @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader style-loader html-webpack-plugin) and react & react-dom. The trouble comes when I try to import some stylesheet in any component of my project, the error is: import api from "!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";. I'm little confused because I checked many times other webpack configurations done by myself and they are the same that I am using now. What is your advice? Thank you!
2
-
You will need a separate loader for importing stylesheets, e.g. postcss.tscpp– tscpp2021-01-27 14:43:14 +00:00Commented Jan 27, 2021 at 14:43
-
I tried but it didn't work. In previous projects I worked with css and webpack, importing styles from react components and had no problem. Any other idea?ignaciomartin– ignaciomartin2021-01-27 16:24:22 +00:00Commented Jan 27, 2021 at 16:24
Add a comment
|
1 Answer
I had this issue, seems that webpack does not allow multiple definitions of the styles css file. So, what solved the issue for me is remove the css file from "styles" in angular.json
//....
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"outputPath": "dist/app-name",
"index": "src/index.html",
"main": "src/app/main.ts",
"polyfills": "src/app/polyfills.ts",
"tsConfig": "tsconfig.json",
"preserveSymlinks": true,
"assets": [
"src/client/img"
],
"styles": [], //don't mention your styles.css here
"scripts": [],
//....
webpack.config.js should include the loaders and it should be enough
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
