2

运行时出现以下错误npm run storybook。我几乎可以肯定这是因为我的 webpack.config 中缺少某些东西或缺少 npm 包。

我已经研究了尽可能多的我知道如何/寻找什么来解决这个问题，并希望能得到帮助。

链接到我的示例 Github 存储库 https://github.com/hungrysquirrel/storybookv3/commit/85ba4e87ad7b27fbb3433a61c49da0fc254f528d

启动服务器时我可以在终端中看到的错误

ERROR in ./~/css-loader?{"importLoaders":1}!./~/postcss-loader/lib?{"ident":"postcss","plugins":[null,null]}!./~/@blueprintjs/core/dist/index.js
Module build failed: Syntax Error

(7:1) Unknown word

  5 |  * and https://github.com/palantir/blueprint/blob/master/PATENTS
  6 |  */
> 7 | "use strict";
    | ^
  8 | function __export(m) {
  9 |     for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];

 @ ./~/css-loader?{"importLoaders":1}!./~/postcss-loader/lib?{"ident":"postcss"}!./css/global.css 3:10-151
 @ ./css/global.css
 @ ./stories/index.js
 @ ./.storybook/config.js
 @ multi ./~/@storybook/react/dist/server/config/polyfills.js ./~/@storybook/react/dist/server/config/globals.js (webpack)-hot-middleware/client.js?reload=true ./.storybook/config.js

ERROR in ./~/css-loader?{"importLoaders":1}!./~/postcss-loader/lib?{"ident":"postcss","plugins":[null,null]}!./~/@blueprintjs/table/src/table.scss
Module build failed: Syntax Error

(1:1) Unknown word

> 1 | // Copyright 2016 Palantir Technologies, Inc. All rights reserved.
    | ^
  2 | // Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
  3 | // of the license at https://github.com/palantir/blueprint/blob/master/LICENSE

 @ ./~/css-loader?{"importLoaders":1}!./~/postcss-loader/lib?{"ident":"postcss"}!./css/global.css 4:10-167
4

2 回答 2

1

我只是有同样的问题。我设法让它工作

  • 在global.css：

    // replacing
@import '~@blueprintjs/core';
// by the more explicit
@import "~@blueprintjs/core/dist/blueprint.css";

  • 在webpack.config.js我包括 css 和文件的加载器：

    { test: /\.css$/, use: ["style-loader", "css-loader"] },

{
    test: /\.(eot|ttf|woff|woff2)$/,
    // We need to resolve to an absolute path so that this loader
    // can be applied to CSS in other projects (i.e. packages/core)
    loader: require.resolve("file-loader") + "?name=fonts/[name].[ext]"
},
于 2017-07-19T13:37:25.650 回答
1

解决了

  1. 包括 .css 文件中的 scss 文件 - 不好
  2. Webpack 配置不正确。下面的设置解决了这个问题

const path = require('path');
const srcPath = path.join(__dirname, '../src');
const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');

module.exports = (baseConfig, env) => {
  const config = genDefaultConfig(baseConfig, env);
  config.module.rules.push({
        test: /\.scss$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "sass-loader" // compiles Sass to CSS
            }]
  })
  config.resolve.extensions.push('.css', '.scss', '.sass');
  return config;
};

于 2017-07-21T23:16:35.117 回答