Loader for CSS / SASS in Webpack

Question

I picked up an example webpack config file that has the following loader.

   test: /\.scss|.css$/,

   loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss')

It seems to be working but what I can't understand is that many places it states that you must use a sass-loader but I don't have it installed, and it's not listed inside my packages file.

From what I can see, it's loading the style-loader and then the css loader.

What is happening here? I see no reference to sass /scss only on the test line (above). Also I notice that it is using the extract function off of the ExtractTextPlugin, what is the difference to just using

  loader: ['style', 'css?sourceMap!postcss']

Edit

These are the postcss plugins I am using.

  require('postcss-import')({addDependencyTo: bundler}),
        require('postcss-inline-comment')(),
        require('postcss-hexrgba'),
        require('postcss-size'),
        require('precss')(),
        require('css-mqpacker')(),
        require('autoprefixer')({
            browsers: ['last 2 version']
        })

Hi @bebraw, thanks for the prompt reply. I have updated the question to include the plugins I am using. — Martin
I am just a little confused, because as far as I know I am not using any sass loader but it works! So the next question would be should I be using a sass-loader instead of what ever is making it magically work ? — Martin
I think it's that precss plugin. See github.com/jonathantneal/precss . — Juho Vepsäläinen
Yes, it appears it was, can you add an answer so i can mark you as correct — Martin

Juho Vepsäläinen Juho Vepsäläinen · Accepted Answer · 2016-07-19T16:27:54

2

votes

It works because you have precss postcss plugin enabled. It provides SASS style markup.

Loader for CSS / SASS in Webpack

Edit

1 Answers