反应Styleididist和SASS

时间:2017-12-07 20:18:53

标签: reactjs sass react-styleguidist

所以我的设置非常简单

styleguide.config.js

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

每当我运行npm run styleguide时,我都会收到此错误:

模块解析失败:意外的字符@您可能需要适当的加载程序来处理此文件类型。

bootstrap.scss 看起来像这样:

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

我知道我需要添加SASS-loader,但我发现的示例使用的是不同的上下文,所以我还是无法解决它们。

P.S。当我运行应用程序时,SASS在React Styleguide之外工作,而不是样式指南。

1 个答案:

答案 0 :(得分:4)

好的,所以解决方法是确保您的主项目可以编写SASS。但这是一个不同的问题。

我只需要将webpackConfig添加到

<强> styleguide.config.js

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