React Styleguidist and SASS

Question

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.

We have an extensive guide about that: https://react-styleguidist.js.org/docs/webpack.html — is anything missing there? — Artem Sapegin, Dec 11 '17 at 09:34
I think the issue is that react-styleguidist is going to look for ./webpack.config.js in the root directory but in my case it was under config/webpack.config.dev.js (i am using create-react-app) — luiquao, Dec 11 '17 at 21:11
This is similar to webpack itself. You either follow a convention or require a file yourself. — Artem Sapegin, Dec 12 '17 at 07:21

score 5 · Accepted Answer · answered Dec 08 '17 at 17:47

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')
    ]
};

React Styleguidist and SASS

1 Answers1