Могу ли я использовать CSS-модули с Storybook 5 (React flavour)? - PullRequest
Новая
       42

Могу ли я использовать CSS-модули с Storybook 5 (React flavour)?

1 голос
/ 12 марта 2019

Я пытаюсь использовать Storybook v5.0 в своем проекте и использую модули React + Webpack4 + CSS.(Я не использую CreateReactApp)

Моя настройка довольно проста, и я смог настроить Storybook без CSS-модулей.

Однако, если я пытаюсь отредактировать пользовательскую конфигурацию веб-пакета storybook для поддержки модулей CSS, она выдает ошибку.

Когда я запускаю npm run storybook, я получаю ошибку: 

ERROR in ./src/components/Test/index.css (./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??postcss!./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js??ref--9-1!./node_modules/postcss-loader/src!./src/components/Test/index.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(2:1) Unknown word

  1 |
> 2 | var content = require("!!../../../node_modules/css-loader/dist/cjs.js??ref--9-1!../../../node_modules/postcss-loader/src/index.js!./index.css");
    | ^
  3 |
  4 | if(typeof content === 'string') content = [[module.id, content, '']];

В моем package.json: 

"@storybook/addon-actions": "^5.0.0",
"@storybook/addons": "^5.0.0",
"@storybook/react": "^5.0.0",

Мой .storybook/webpack.config.js следует примеру на их веб-сайте и выглядит так: 

const path = require("path");

const stylesLoaders = [
  "style-loader",
  {
    loader: "css-loader",
    options: {
      modules: true,
      localIdentName: "[path]__[local]--[hash:base64:5]"
    }
  },
  "postcss-loader"
];

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        loaders: stylesLoaders,
        include: path.resolve(__dirname, "../")
      }
    ]
  }
};

Любая помощь будет оценена, какЯ хотел бы использовать последнюю версию Storybook!

1 Ответ

1 голос
/ 22 марта 2019

У меня была такая же проблема с новым сборником рассказов (v5).Наконец, я заставил его работать после того, как мне пришлось распространять config и config.module в .storybook / webpack.config.js

. В соответствии с документацией Storybook, я использовал функцию для webpack, а не для объекта: https://storybook.js.org/docs/configurations/custom-webpack-config/

Вот пример: 

module.exports = ({ config }) => ({
  ...config,
  module: {
    ...config.module,
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use:[
          {
            loader: require.resolve("babel-loader"),
            options: {
            presets: [["react-app", { flow: false, typescript: true }]]
            }
          }
        ],
        include: path.resolve(__dirname, "../")
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader",
            options: { sourceMap: true }
          },
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: "[name]__[local]__[hash:base64:5]"
            }
          },
          {
            loader: require.resolve("postcss-loader"),
            options: {
              ident: "postcss",
              plugins: () => [
                require("postcss-flexbugs-fixes"),
                require("postcss-inline-svg"),
                require("postcss-svgo"),
                autoprefixer({
                  browsers: [
                    ">1%",
                    "last 4 versions",
                    "Firefox ESR",
                    "not ie < 9"
                  ],
                  flexbox: "no-2009"
                })
              ]
            }
          }
        ],
        include: path.resolve(__dirname, "../")
      }
    ]
  }
});

Надеюсь, это поможет вам:)

...