由于语法错误，BlueprintJS模块构建失败

Question

当我运行npm run storybook时，我得到了以下错误。我几乎可以肯定，这是由于我的webpack.config中缺少了什么，或者是npm包丢失了。

我已经研究了尽可能多的我知道如何/寻找解决这个问题的方法，并感谢帮助。

链接到我的示例Github repo 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

Answer 1

我也有同样的问题。我设法让它工作了

global.css中的

• ：

//替换@import‘~@blueprintjs/ "~@blueprintjs/core/dist/blueprint.css";

• in’；//通过更明确的@import核心webpack.config.js，我包含了css和文件的加载器：

{测试: /.css$/，使用："style- loader "，" CSS -loader“}，{测试:/。(eot|ttf|woff|woff2)$/，//我们需要解析到一个绝对路径，这样这个加载器//才能应用于其他项目(即包/核心)的CSS加载程序:require.resolve(”文件加载器“)+”？name=//name.ext“}，

Answer 2

已解决

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;
};

​