"Unknown word" error showing after adding postcss-loader

Question

I am trying to add postcss loader in my webpack but after adding postcss loader showing Unknown word error. I also attached error screenshot. please find attachment. Not sure what error is....

I also added postcss-loader, sass-loader ,css-loader ,style-loader. If i am doing anything wrong please tell me guys.

Below is my loaders in config file and package.json file.

  module: {
  rules: [
    {
      test: /\.tsx?$/,
      use: ["babel-loader", "ts-loader", "tslint-loader"]

    },
    {
      test: /\.css$/,
      include: __dirname + "./src/css",
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true,
            importLoaders: 1
          }
        },
        'postcss-loader',

      ]
    },
    {
      test: /\.scss$/,
      use: [
        "style-loader",
        {
          loader: "css-loader",
          options: {
            sourceMap: isDevMode
          }
        },
        {
          loader: "sass-loader",
          options: {
            sourceMap: isDevMode
          }
        }
      ]
    },

    {
      test: /\.(sa|sc|c)ss$/,
      use: [
        isDevMode ? 'style-loader' : MiniCssExtractPlugin.loader,
        'css-loader',
        'sass-loader',
      ],
    },

    {
      loader: 'postcss-loader',
      options: {
        plugins: () => [require('autoprefixer')],
        loader: "postcss-loader",
      }
    },

    {
      test: /\.(ttf|eot|woff|woff2)$/,
      use: {
        loader: "file-loader",
        options: {
          name: "fonts/[name].[ext]",
        },
      },
    },
    {
      test: /\.(jpe?g|png|gif|svg|ico)$/i,
      use: [
        {
          loader: "file-loader",
          options: {
            outputPath: "assets/"
          }
        }
      ]
    },
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: [
        'babel-loader'
      ]
    }

  ]
},

package.json

"dependencies": {

    "cssnano": "4.0.5",
    "postcss-cssnext": "3.1.0",
    "postcss-import": "12.0.0",
    "prop-types": "15.6.0",
    "react": "15.6.2",
    "react-dom": "15.4.2",
    "react-redux": "4.4.9",
    "react-router": "3.0.2",
    "react-router-dom": "4.2.2",
    "redux": "^3.5.2",
    "redux-logger": "^2.6.1",
    "redux-promise": "^0.5.3",
    "redux-react-session": "2.2.0",
    "redux-thunk": "2.3.0",
    "sugarss": "2.0.0",
    "superagent": "3.8.1"
  },
  "devDependencies": {

    "autoprefixer": "^9.0.2",
    "babel-loader": "^7.1.4",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "eslint": "3.15.0",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.1.0",
    "mini-css-extract-plugin": "0.4.2",
    "open": "0.0.5",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.20.3",
    "webpack": "4.17.1",
    "webpack-dev-middleware": "1.6.1",
    "webpack-dev-server": "3.1.5",
    "webpack-hot-middleware": "2.12.2",
    "webpack-md5-hash": "0.0.5"
  },

score 6 · Answer 1 · answered Jan 13 '22 at 10:30

6

This might help someone, or me later again.

I got this error because instead of

@import '../../common.scss';

In my SCSS, I had mistakenly written

@import url('../../common.scss');

Removing the url() function got rid of the error.

answered Jan 13 '22 at 10:30

Aditya Mittal

1,681
16
12

2

This was the right answer in my case. Thanks! – davidvegacl Jul 17 '22 at 02:01

score 5 · Answer 2 · edited Mar 21 '23 at 02:29

I kept getting "unknown word" error as well. It was a result that css cannot read comments with // but scss can... So I had to add the postcss-scss to the options after installing it with:

npm install --save-dev postcss-scss

or (if you use Yarn)

yarn add --dev postcss-scss

(webpack.config.js)

const WebpackNotifierPlugin = require('webpack-notifier');
const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: 'postcss-loader',
        options: {
          ident: 'postcss-scss',
          syntax: 'postcss-scss',
          plugins: () => [require('postcss-flexbugs-fixes')()]
        }
      }
    ]
  },
  plugins: [
    new WebpackNotifierPlugin({
      alwaysNotify: true,
      title: 'Enterprise',
      contentImage: path.join(__dirname, 'image.png')
    })
  ]
};

Thanks ! this works with less as well – Abhinav Kumar Jun 17 '22 at 10:49 — Abhinav Kumar, Jun 17 '22 at 10:49

score 1 · Answer 3 · answered Sep 07 '20 at 07:11

1

In my case, I had to enforce sugarss parser. In the modules configurations of webpack.config.ts. If You use an another parser, change accordingly.

...
{
    loader: 'postcss-loader',
    options: {
        ... 
        parser: 'sugarss',      < ====
        ...
        plugins: [
            ...
        ],
    },
},
...

answered Sep 07 '20 at 07:11

snoob dogg

2,491
3
31
54

This helps, but why is it necessary? – Ingo Steinke Aug 18 '22 at 10:21
I don't remember ^_^' – snoob dogg Aug 18 '22 at 11:06

score 0 · Answer 4 · answered Jun 14 '21 at 19:07

0

Crystal's comment worked for me thank you!. You can also hook up postcss-scss in postcss.config.js

// postcss.config.js
module.exports = {
  syntax: 'postcss-scss',
  plugins: {
    …
  }
}

answered Jun 14 '21 at 19:07

Justin T.

54
3

score 0 · Answer 5 · answered May 02 '23 at 14:12

0

In my case I was using Vue (with Vite) and forgot to specify lang="scss" in my style block:

<style lang="scss">
  //   ^^^^^^^^^^^ Don't forget!

  @import 'my-theme.scss';
</style>

answered May 02 '23 at 14:12

Ben

315
1
3
14

score -3 · Answer 6 · edited Aug 11 '20 at 18:16

-3

Run this in a terminal to install this package

npm i postcss-loader

edited Aug 11 '20 at 18:16

shreyasm-dev

2,711
5
16
34

answered Aug 11 '20 at 15:58

Dharmender Bishnoi

25
4

1

This answer duplicates the one given by @Crystal. – Anton Rusak Aug 11 '20 at 16:55

score -4 · Accepted Answer · edited Apr 07 '19 at 16:01

-4

{
  loader: 'postcss-loader',
  options: {
    plugins: () => [require('autoprefixer')],
    loader: "postcss-loader",
  }
},

Is declared without a test:, so it is being used always

edited Apr 07 '19 at 16:01

vsync

118,978
58
307
400

answered Aug 23 '18 at 05:23

UXDart

2,500
14
12

Thank you for your reply. but i am getting same problem. I updated above config file. Can you please check am i doing correct or not ? – Nagesh Fultambkar Aug 23 '18 at 05:56
you still have a `loader: 'postcss-loader',` in the middle of the file without a `test:` – UXDart Aug 23 '18 at 06:30
2

This did not help me – vsync Apr 08 '19 at 08:05
2

Confused where is the ``test:`` in that code snippet? How was this selected as the correct answer? – Crystal May 27 '20 at 03:46
No `test:` is this example... – southpaw93 Oct 14 '21 at 09:39

"Unknown word" error showing after adding postcss-loader

7 Answers7