1

我在 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 server 命令时，我在控制台中收到以下错误：

意外的令牌导入

发生错误是因为它访问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 时发生错误

4

1 回答 1

0

Styleguidist 不支持importwebpack 配置中的 ECMAScript 模块 ( )，因此您需要require改用：

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

PS据我所知webpack默认也不支持它。

于 2018-08-21T07:06:54.820 回答