Question

在 styleguide.config.js

中获取webpack配置时遇到问题

这是我的styleguide.config.js：

module.exports = {
  title: 'My Guide Project',
  components: 'src/components/**/[A-Z]*.js',
  showSidebar: true,
  pagePerSection: true,
  sections: [
    {
      name: 'Components',
      components: () => [
        './src/components/Card/index.js',
      ],
      exampleMode: 'hide', // 'hide' | 'collapse' | 'expand'
      usageMode: 'expand'
    },
  ],
  webpackConfig: require('./tools/webpack.config.js'), <-- Webpack config
}

但是当我运行npx styleguidist服务器命令时，在控制台中出现以下错误：

意外的令牌导入

发生错误是因为它访问 webpack.config.js ，并且在文件的开头不解释 “ import” 。

这是 webpack.config.js

的第一行

import path from 'path';
import webpack from 'webpack';
import AssetsPlugin from 'assets-webpack-plugin';
import nodeExternals from 'webpack-node-externals';
...
...

有人可以帮我吗？

我在很多论坛中都看到过，有人说您必须配置 .babelrc ，但是我的项目中没有该文件。

更新

这是 index.js 文件

import React, { Component } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import PropTypes from 'prop-types';
import s from './Card.css';

class Card extends Component {

  render() {
    const {
      title,
      titleIconClass,
      showCardAction,
      loading,
      cardHeaderLink,
      iconCustomStyles,
    } = this.props;

    return (
      <div className={s.smgCard}>
        <div
          className={`${s.smgCardHeader} ${
            cardHeaderLink ? s.cursorPointer : null
          }`}
          onClick={() => console.log("TEST!")}
          role="presentation"
        >
          <div className={s.smgCardTitle}>
            <span className={s.smgCardTitleText}>{title}</span>
            <i className={`${s.smgCardIcon} ${titleIconClass}`} style={ iconCustomStyles }/>
          </div>
        </div>
      </div>
    );
  }
}

export default withStyles(s)(Card);

尝试通过 withStyles

注入样式CSS时发生错误

Answer 1

Styleguidist在webpack配置中不支持ECMAScript模块（import），因此您需要改用require：

const path = require('path');
const webpack = require('webpack');

P。 S。据我所知，webpack doesn't support也是默认情况。

Rect Styleguidist：意外的令牌导入

1 个答案: