React Styleguidist 和 SASS答案

【问题标题】：React Styleguidist and SASSReact Styleguidist 和 SASS
【发布时间】：2018-05-22 00:51:39
【问题描述】：

所以我的设置很简单

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，但我发现的示例使用不同的上下文，所以我还不能真正弄清楚。

附言当我运行应用程序本身时，SASS 在 React Styleguide 之外工作，而不是 styleguide。

【问题讨论】：

我们有一个详尽的指南：react-styleguidist.js.org/docs/webpack.html — 那里有什么遗漏吗？
我认为问题在于 react-styleguidist 将在根目录中查找 ./webpack.config.js 但在我的情况下它位于 config/webpack.config.dev.js 下（我正在使用 create-react-app)
这和 webpack 本身类似。您要么遵循约定，要么自己要求文件。

标签： reactjs sass react-styleguidist

【解决方案1】：

好的，所以解决方案是确保您的主项目可以编译 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')
    ]
};

【讨论】：