reactjssassreact-styleguidist

React Styleguidist and SASS

So my set up is pretty simple

styleguide.config.js

module.exports = {
    components: 'src/components/**/*.js',
    require: [
        path.join(__dirname, 'node_modules/bootstrap/scss/bootstrap.scss')
    ]
};

Whenever I run npm run styleguide I get this error:

Module parse failed: Unexpected character @ You may need an appropriate loader to handle this file type.

bootstrap.scss looks like this:

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/mixins";
...
...

I understand I need to add SASS-loader but the examples I found are using different context so I cant really figure them out yet.

p.s. SASS works outside React Styleguide when I run the app itself, not styleguide.

Solution

  • Ok so the solution is to make sure that your main project can comiple SASS. But thats a different question.

    I just had to add webpackConfig to

    styleguide.config.js

    module.exports = {
    components: 'src/kitchensink/**/*.js',
    webpackConfig: require('./config/webpack.config.dev.js'),
    require: [
        path.join(__dirname, './src/sass/bootstrap.scss')
    ]
};