css loader not working

Question

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 .

Paste your package.json file

Rajendran Nadar
– Rajendran Nadar

2018-04-15 11:36:19 +00:00
Commented Apr 15, 2018 at 11:36 — Rajendran Nadar
– Rajendran Nadar, Commented Apr 15, 2018 at 11:36

Seth McClaine · Accepted Answer · 2018-04-15 11:30:06Z

1

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"

edited Apr 15, 2018 at 11:30

answered Apr 15, 2018 at 11:18

Seth McClaine

10.1k7 gold badges44 silver badges67 bronze badges

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

3 Comments

The Walrus Over a year ago

made no difference unfortunately :(

Seth McClaine Over a year ago

ok, that was the only reference I saw to the error you made.... github.com/shama/letswritecode/issues/8

Seth McClaine Over a year ago

Added a couple other things to try

Rajendran Nadar · Accepted Answer · 2018-04-15 11:30:17Z

0

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

edited Apr 15, 2018 at 11:30

answered Apr 15, 2018 at 11:21

Rajendran Nadar

5,4784 gold badges37 silver badges56 bronze badges

5 Comments

Seth McClaine Over a year ago

missing a comma between use objects

The Walrus Over a year ago

still same issue unfortunately :(. it's still pointing at the first line of the css file inside the node module

Rajendran Nadar Over a year ago

Make sure the modules are installed

Rajendran Nadar Over a year ago

On which line you are getting this error @TheWalrus SyntaxError: Unexpected token .?

The Walrus Over a year ago

@RaajNadar here: workspace/project/node_modules/react-responsive-carousel/lib/styles/carousel.min.css:1

Kenneth Truong · Accepted Answer · 2018-04-15 11:37:11Z

0

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'],
  }),
},

answered Apr 15, 2018 at 11:37

Kenneth Truong

4,1763 gold badges32 silver badges49 bronze badges

Comments

Gautam Naik · Accepted Answer · 2018-04-15 14:14:06Z

0

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',
    }),
  };

answered Apr 15, 2018 at 14:14

Gautam Naik

9,4643 gold badges31 silver badges45 bronze badges

Collectives™ on Stack Overflow

css loader not working

4 Answers 4

3 Comments

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related