CODEWITHSUNDEEP
javascriptreactjswebpackcss-loader
ignaciomartin
ignaciomartin

Reputation: 91

Bug with css-loader / style-loader

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!

Upvotes: 9

Views: 2830

Answers (1)

Yossi
Yossi

Reputation: 21

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']
      },

Upvotes: 1

Related Questions