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

【问题标题】：BlueprintJS Module build failed due to syntax error由于语法错误，BlueprintJS 模块构建失败
【发布时间】：2017-07-18 18:02:27
【问题描述】：

运行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

【问题讨论】：

标签： blueprintjs

【解决方案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]"
},

【讨论】：

干杯本杰明仍然错误与导入 @import '~@blueprintjs/table/src/table.scss';对我有什么明智的建议吗？ ./~/css-loader 中的错误？{"importLoaders":1}!./~/postcss-loader/lib?{"ident":"postcss","plugins":[null,null]}!./ ~/@blueprintjs/table/src/table.scss 模块构建失败：语法错误 (1:1) 未知单词 > 1 | // 版权所有 2016 Palantir Technologies, Inc. 保留所有权利。 | ^ 2 | // 根据修改后的 BSD-3 许可（“许可”）获得许可；您可以获得一份 3 | //github.com/palantir/blueprint/blob/master/LICENSE的许可证

【解决方案2】：

解决了

在 .css 文件中包含 scss 文件 - 不好
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;
};

【讨论】：