CODEWITHSUNDEEP
javascriptcssreactjscss-loader
The Walrus
The Walrus

Reputation: 1208

css loader not working

I'm trying to import a carousel into my project and no matter which one I use I get errors saying you may need an appropriate loader pointing at the carousels css file

  {
    test: /\.s?css$/,
    include: [/src/],
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: ['css-loader', 'postcss-loader', 'sass-loader'],
    }),
  },

I am doing this so surely this should cover it right?

can post more code but error coming from here: react-responsive-carousel/lib/styles/carousel.min.css:1

SyntaxError: Unexpected token .

Upvotes: 0

Views: 1328

Answers (4)

Gautam Naik
Gautam Naik

Reputation: 9368

Try importing the carousel css in your css/scss file like this

@import "~react-responsive-carousel/lib/styles/carousel.min.css";

then in your webpack file try this setting

  {
    test: /\.css$/,
    exclude: /node_modules/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: 'css-loader!postcss-loader',
    }),
  };
  {
    test: /\.scss$/,
    exclude: /node_modules/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: 'css-loader!postcss-loader!sass-loader',
    }),
  };

Upvotes: 0

Kenneth Truong
Kenneth Truong

Reputation: 4176

Make sure you updated your include to include /node_mobuldes

Also if that doesn't work try separating your css and sass loader.

{
  test: /\.css$/,
  include: [/node_modules/, /src/],
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'postcss-loader', 'sass-loader'],
  }),
},
{
  test: /\.scss$/,
  include: [/src/],
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'postcss-loader', 'sass-loader'],
  }),
},

Upvotes: 0

Rajendran Nadar
Rajendran Nadar

Reputation: 5438

Do this if you want to add multiple loaders

Install the modules like this npm install --save-dev css-loader

{
    test: /\.css$/,
    exclude: /node_modules/,
    use: ExtractTextPlugin.extract({
       fallback: "style-loader",
       use: [
           {
              loader: 'css-loader'
           },
           {
              loader: 'postcss-loader'
           }
           // more loaders if you have any
           // Make sure you installed this loaders
        ]
    })
}

Give this a try any let me know if any issues.

Reference here

Upvotes: 0

Seth McClaine
Seth McClaine

Reputation: 10040

Try adding loader:'style!css!'

  {
    test: /\.s?css$/,
    include: [/src/],
    loader:'style!css!',
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: ['css-loader', 'postcss-loader', 'sass-loader'],
    }),
  },

Attempt 2

Try updating test to test: /\.css$/, (long shot)

  {
    test: /\.css$/,
    include: [/src/],
    loader:'style!css!',
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: ['css-loader', 'postcss-loader', 'sass-loader'],
    }),
  },

Attempt 3

Try setting loaders this way 

loaders: ['style-loader', 'css-loader'],

or

loader: "style-loader!css-loader"

Upvotes: 1

Related Questions