CODEWITHSUNDEEP
cssreactjswebpack
user2128
user2128

Reputation: 640

Module parse failed error for css loader

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.

Upvotes: 0

Views: 1754

Answers (1)

deowk
deowk

Reputation: 4318

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

Upvotes: 1

Related Questions