React-styleguidist: SCSS webpack loader example

[ghost]

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

[sapegin]

I have no problems with Sass on my work project. Will check the config tomorrow.

One question: do you import your SCSS files in your components?

[ghost]

Thanks for the quick reply. I had not, but adding require('./Component.scss') with the following loader works:

      {
        test: /\.scss$/,
        include: dir,
        loaders: ['style', 'css', 'sass']
      }

I'm guessing that each component should require its stylesheet, rather than expecting a CSS bundle to be available across the guide (excepting the styleguidist sheets in src/)?

[sapegin]

You can add CSS bundle to Webpack entries list but hot reload for CSS will not work.

Or you can import root SCSS file somewhere from your JavaScript.

[ghost]

Got it! If it would help, I might be able to adapt this to an example for the README later.

[sapegin]

That would be awesome, the docs are far from great now ;-)

[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 :)

[AoDev]

We use less but it's the same.

We have our own entry point for our docs. (styleguide)
As you can see we even use other loaders. For example we build a svg Icon sprite that people can use with an Icon component that we have by simply giving the name of the icon.

this is the entry point: docs/index.js

require('../less/index.less')
require('./docs.less')

our webpack config
styleguide.config.js

module.exports = {
  title: 'Components Guide',
  sections: docsSections,
  updateWebpackConfig: function updateWebpackConfig (webpackConfig, env) {
    webpackConfig.entry.push(path.join(FRAMEWORK_DIR, 'docs/index.js'))

    webpackConfig.module.loaders.push(
      // Babel loader will use your project’s .babelrc
      {
        test: /\.jsx?$/,
        include: [FRAMEWORK_DIR],
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /\.less$/,
        include: [FRAMEWORK_DIR],
        loader: 'style!css!less'
      },
      {
        test: /\.svg$/,
        include: ICONS_DIR,
        loader: 'svg-sprite'
      }
    )

    return webpackConfig
  },
  styleguideDir: STYLEGUIDE_DIR,
  assetsDir: ASSETS_DIR
}

[asci]

Any working example for scss? Have the same issue

[mik01aj]

See mine above ⬆️

[asci]

@mik01aj thanks a lot, but I don't have separate styles file

[mik01aj]

Then I don't understand what scss you want to load.

[sapegin]

Closing it for now. Feel free to send pull request to improve the docs.

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