小编phi*_*tin的帖子

我开始在另一个项目中使用故事书，我之前已经在另一个存储库中使用过 SCSS @import 来工作，但我一生都无法弄清楚出了什么问题。

./src/components/Navigation/style.scss 中的错误（./node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/react-scripts/ node_modules/postcss-loader/src??postcss!./node_modules/react-scripts/node_modules/sass-loader/lib/loader.js??ref--8-3!./node_modules/babel-loader/lib!. /node_modules/style-loader!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/components/Navigation/style.scss) 模块构建失败（来自 ./node_modules/反应脚本/node_modules/sass-loader/lib/loader.js):

@import '../../styles/vars/colors'; ^

“'”后的 CSS 无效：预期有 1 个选择器或 at 规则，但为“'use strict';”

我的 webpack 配置在 .storybook 中

const path = require('path');

module.exports = {
  entry: ['@babel/polyfill'],

  devtool: 'eval-source-map',
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.stories\.jsx?$/,
        loaders: [require.resolve('@storybook/addon-storysource/loader')],
      },
      {
        test: /\.(scss|css)$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              import: true,
              importLoaders: 1,
            },
          },
          {
            loader: 'sass-loader', …

我正在尝试在 react-bootstrap-table 的格式化程序中使用 react-bootstrap OverlayTrigger 和 Tooltip 并不断收到以下错误：

OverlayTrigger 唯一需要的道具是overlay，它应该是一个节点，而工具提示唯一需要的道具是id（尽管他们的例子没有显示你需要一个ID），它需要是一个字符串。

“onlyChild 必须传递给只有一个孩子的孩子。”

有问题的相关代码如下：

import {Button, DropdownButton, MenuItem, Modal,
    OverlayTrigger, Tooltip} from 'react-bootstrap';

....

const submitterFormatter = (submitter, row) => {
  return (
    <OverlayTrigger placement="bottom" overlay={toolTipComponent(submitter, row)}>
      {submitter}
    </OverlayTrigger>
  );
};

const toolTipComponent = (toolTipText, row) => {
  return (
    <Tooltip id={String(row.id)}>
      {toolTipText}
    </Tooltip>
  );
};

我也为 submitterFormatter 尝试了以下方法

const submitterFormatter = (submitter, row) => {
  return (
    const toolTipInstance = toolTipComponent(submitter, row);
    <OverlayTrigger placement="bottom" overlay={toolTipInstance}>
      {submitter}
    </OverlayTrigger>
  );
};