Doesn't work for scss files

[raderj89]

Similar problem to #1 but the suggested solution doesn't work for me.

My project uses scss. In my webpack config, I've got:

const path = require('path');

module.exports = {
  // other configs...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'sass-loader',
          },
          {
            loader: 'cssimportant-loader',
          }
        ],
      },
    ],
  },
};

Webpack fails to compile with this error:

ERROR in ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./node_modules/cssimportant-loader!./src/components/index.scss
Module build failed: Error: undefined:24:3: missing '}'

It looks like it's trying to parse the scss and not the compiled css.

I even switched the order of sass-loader and css-loader but that didn't work either.

Any suggestions?

[officert]

maybe try changing the order, since it expects CSS and not Sass:

const path = require('path');

module.exports = {
  // other configs...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'cssimportant-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'sass-loader',
          }
        ],
      },
    ],
  },
};

[raderj89]

same issue after doing the ordering you suggested:

ERROR in ./node_modules/cssimportant-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./src/components/index.scss
Module build failed: Error: undefined:3:52: property missing ':'
    at error (/Users/jaredrader/src/github.com/apps/chat-widget/node_modules/css/lib/parse/index.js:62:15)
    at declaration (/Users/jaredrader/src/github.com/apps/chat-widget/node_modules/css/lib/parse/index.js:224:33)
    at declarations (/Users/jaredrader/src/github.com/apps/chat-widget/node_modules/css/lib/parse/index.js:253:19)
    at rule (/Users/jaredrader/src/github.com/apps/chat-widget/node_modules/css/lib/parse/index.js:561:21)
    at rules (/Users/jaredrader/src/github.com/apps/chat-widget/node_modules/css/lib/parse/index.js:118:70)
    at stylesheet (/Users/jaredrader/src/github.com/apps/chat-widget/node_modules/css/lib/parse/index.js:81:21)
    at Object.module.exports [as parse] (/Users/jaredrader/src/github.com/apps/chat-widget/node_modules/css/lib/parse/index.js:565:20)
    at Object.module.exports (/Users/jaredrader/src/github.com/apps/chat-widget/node_modules/cssimportant-loader/index.js:24:19)

[raderj89]

This worked for me.... I copied the contents of cssimportant loader's index.js file into my project, added the css package and added it as a transform option:

      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              transform: './css-transform.js'
            }
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'sass-loader',
          },
        ],
      },

[hewenguang]

My configuration file is fine, it seems the order is important

[{ loader: MiniCssExtractPlugin.loader, }, { loader: 'css-loader', }, { loader: 'cssimportant-loader', }, { loader: 'sass-loader', }]