SCSS webpack loader example

React-styleguidist has very specific opinions about where component source, style, and documentation should go. This is very useful (and preferable), but makes it a little bit difficult to figure out how to add things like an SCSS loader. An example of this would be a big help, as I can’t get SCSS working with the docs as is.

Here is my styleguide.config.js webpack config:

  components: './lib/components/**/*.jsx',
  updateWebpackConfig: function(webpackConfig, env) {
    // Your source files folder or array of folders, should not include node_modules
    let dir = path.join(__dirname, 'lib');
    webpackConfig.module.loaders.push(
      // Babel loader will use your project’s .babelrc
      {
        test: /\.jsx?$/,
        include: dir,
        exclude: 'node_modules/',
        loader: 'babel-loader'
      },
      // Other loaders that is needed for your components
      {
        test: /\.css$/,
        include: dir,
        loader: 'style!css?modules&importLoaders=1'
      },
      {
        test: /\.scss$/,
        include: dir,
        loader: 'sass-loader'
      }
    );
    return webpackConfig;
  }

SCSS files are named like the other files in existing examples: Component.jsx, Component.scss, Readme.md.

Package.json dependencies:

"devDependencies": {
    "babel-plugin-react-transform": "^2.0.2",
    "babel-preset-react-hmre": "^1.1.1",
    "node-sass": "^3.4.2",
    "react-styleguidist": "^2.1.0",
    "react-transform-hmr": "^1.0.4",
    "sass-loader": "^3.2.0"
  },
  "dependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.7.2",
    "babel-loader": "^6.2.4",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-0": "^6.5.0",
    "core-decorators": "^0.11.0",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-router": "^2.0.1"
  }

I tried a number of different things in the loader string:

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

None of these result in any output from styleguidist at the terminal, even with a Component.scss like body: { background-color: #00F !important; }. The components just load with no styling beyond the default.

Related issues:

• https://github.com/skidding/cosmos/issues/135
• https://github.com/sapegin/react-styleguidist/issues/52
• https://github.com/sapegin/react-styleguidist/issues/53

[mik01aj]

I do it too. I’ll just paste the relevant part here, maybe it will be helpful for someone:

updateWebpackConfig: function (webpackConfig) {

    webpackConfig.entry.push('./app/scripts/globalConfig.js');

    webpackConfig.entry.push('./app/styles/bootstrap.scss');
    webpackConfig.entry.push('./app/styles/application.scss');
    webpackConfig.entry.push('./app/styles/styleguide-overrides.scss');

    webpackConfig.module.loaders = webpackConfig.module.loaders.concat([
        {
            test: /\.scss$/,
            exclude: /node_modules/,
            loader: 'style!css!postcss!sass',
        },
        {
            test: /\.(png|jpg|eot|woff|woff2|ttf|svg)$/,
            include: /.*/, // Because styleguidist requires either include or exclude.
            loader: 'url?limit=8192',
        },
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',
            // We omit the ignores because of https://github.com/webpack/webpack/issues/1759
            query: _.omit(require('./babel.config'), 'ignore'),
        },
    ]);

    webpackConfig.postcss = [
        autoprefixer({browsers: ['last 2 versions', '> 0.5%']}),
    ];

    webpackConfig.output.pathinfo = true;
    webpackConfig.resolve.extensions = ['', '.js', '.jsx'];

    return webpackConfig;
},

Maybe it’s not the cleanest possible config, but it works for me 😃

[drewdecarme]

I was having the same issues as well with compiling imported .scss files into each component using a derivation of CSS Modules called Babel Plugin React CSS Modules. I read @AoDev suggestion and realized that I didn’t have an exclude in my Style Loader for Webpack 2. Here was my solution

{
        test: /\.(css|scss)$/,
        exclude: /node_modules/,  // originally didn't have it and added
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoader: 1,
              modules: true,
              localIdentName: '[local]___[hash:base64:5]'
            }
          },
          'sass-loader',
          'postcss-loader'
        ]
      },