Module parse failed error for css loader

Question

I am trying to load a css file in my component .js file but while doing so I get this error :

ERROR in ./stories/styles.css Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type.

I have added following rule in my webpack.config.js file to take care of loaders but am still getting the error.

rules: [
      {
        test: /\.s?css$/,
        use: ['style-loader', 'raw-loader', 'sass-loader', 'css-loader'],
        include: [
          path.resolve(__dirname, '../css/'),
        ],
      },

My styles.css file looks like this:

.row {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.row.dark {
    background: #303030;
}

.col {
    width: calc(100% - 400px);
    padding: 15px;
}

.row > .col:first-child {
    border-right: 1px solid #ccc;
    max-width: 400px;
}

Do I need to add any other loader ? I even tried using import instead of require to get the styles.css file but it made no difference.

deowk · Accepted Answer · 2018-06-24 06:43:22Z

1

Webpack loaders get processed from right to left, you need to change the config to:

rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'raw-loader', 'css-loader', 'sass-loader'],
        include: [
          path.resolve(__dirname, '../css/'),
        ],
      },

I am also unsure what the use of the raw-loader is here since it is used to loads files as a string - you might not need it

edited Jun 24, 2018 at 6:43

answered Jun 24, 2018 at 6:31

deowk

4,3181 gold badge27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2128 Over a year ago

I did try your suggested change but it didn't work. I am still getting the same error.

deowk Over a year ago

I would also change the test to /\.scss$/, you would need to rename your files to have the .scss extension but any css should be valid sass. Also have you tried removing raw-loader?

user2128 Over a year ago

So the problem was in the path that I was giving for css files. So after re-arranging the loaders like you suggested and changing the path it worked. Thanks :)

deowk Over a year ago

Ok great, glad you got it sorted...;)

Collectives™ on Stack Overflow

Module parse failed error for css loader

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related