Add documentation to readme on how to use with sass-loader

[ajsharp]

No description provided.

[MoOx]

Just use sass-loader before (so after in the loader definition). This should not need any specific doc.

[ai]

Sorry postcss-loader can’t have a docs for every webpack loader.

I can change my mind if this issue will be popular.

[ajsharp]

@MoOx Yea, I tried that autoprefixer, and it doesn't seem to work. Here's my config:

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var autoprefixer = require('autoprefixer');
var precss = require('precss');

module.exports = {
  context: __dirname,

  output: {
    path: path.join(__dirname, 'build'),
    filename: '[name].js'
  },

  entry: {
    app: './js/app.js'
  },

  module: {
    loaders: [
      {
        test: /\.(scss|sass)$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader', 'postcss-loader', 'sass-loader')}
    ]
  },

  postcss: function() {
    return [autoprefixer, precss];
  },

  sassLoader: {
    includePaths: [path.join(__dirname, 'scss')]
  },

  plugins: [
    new ExtractTextPlugin('styles.css')
  ]
}

Here's the sass file:

.banner {
  background-color: green;
  font-size: 48px;
  text-align: center;
  color: white;
  border-radius: 4px;
  box-shadow: black 1px 1px 1px;
  transform: rotate(7deg);
}

And the output file:

.banner {
  background-color: green;
  font-size: 48px;
  text-align: center;
  color: white;
  border-radius: 4px;
  box-shadow: black 1px 1px 1px;
  transform: rotate(7deg);
}

@ai Using this loader with sass or less is an extremely common use-case -- no one in practice is writing plain-vanilla CSS. I think it would be very useful to have a concrete example of how to use these tools together.

[ai]

I am open for PR. But try to suggest some compact changes. We already have too many config for different cases.

[MoOx]

@ajsharp I think you are not using ExtractTextPlugin the right way.
You should use loader: ExtractTextPlugin.extract('style-loader', ['css-loader', 'postcss-loader', 'sass-loader'])} (an array for the default loaders you want to use, the first parameter is used when extracttextplugin is disabled (so optional).

[ajsharp]

@MoOx Ah, that was it 😄 Thanks very much for the help.

[mattdanna]

+1

[chrisbarless]

@MoOx this saved my life

[occultskyrong]

In the .scss file, use the Chinese comments,
will complain ‘Unknown word’,
I have used in scss the @charset 'utf-8'

[l-zhi]

@MoOx Ah +1

[dqisme]

@MoOx gooood job!

[rmoddel]

@MoOx Thanks!!

[aseem2625]

Using auto prefixer as last 2 versions of browser doesn't add prefixes but if I remove 'last 2 versions' then it works fine. Can someone tell me how does this happen?

postcss: function () {
    return [autoprefixer({browsers: ['last 2 versions']})];
},

@MoOx
Also, can you please tell me what do you mean by "an array for the default loaders you want to use, the first parameter is used when extracttextplugin is disabled (so optional)."

I mean, by your 'first parameter is optional' will my style-loader be ignored?
loader: ExtractTextPlugin.extract('style-loader', ['css-loader', 'postcss-loader', 'sass-loader'])

[sertaconay]

@aseem2625 It's because last 2 versions of browsers don't need any prefix. :p

[kutsan]

Not related but this is somehow top Google result. Here is my Stylus, PostCSS, Webpack 2 config for React, if someone needs.

[YousefMMS]

I just used it like so loader: 'style-loader!css-loader!postcss-loader!sass-loader' and it works with me, is this may generate any other issue?

[IamManchanda]

@ai I think It should reopen with webpack being so popular!

[ai]

@IamManchanda I am not a maintainer anymore =^_^= ask @michael-ciniawsky

[himdel]

I think there may be differing definitions of what "works for me" means here.

loader: 'style-loader!css-loader!postcss-loader!sass-loader'

indeed works fine .. until you need to do @import "~package/file" in your sass and find out that postcss is completely ignoring webpack resolvers and fails on path not found.

Still no idea how to order the plugins so that this works. (And yes, it works fine if postcss-loader is removed from the mix.)