为什么我的Webpack在编译.sass文件时尝试加载.js文件？

Question

我想使用blueprintjs，所以我按照教程进行操作，添加了以下这行代码：

main.sass

@import "~@blueprintjs/core";

然而，我的webpack-dev-server给出了以下错误日志:

ERROR in ./node_modules/css-loader?{"minimize":false}!./node_modules/postcss-loader/lib?{"sourceMap":true}!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./app/javascript/packs/main.sass
Module build failed:
 */
  ^
      Invalid CSS after " */": expected 1 selector or at-rule, was '"use strict";'
      in <redacted>/node_modules/@blueprintjs/core/dist/index.js (line 6, column 4)
webpack: Failed to compile.

我感到疑惑的是，它为什么将index.js文件解析成sass格式转换成css！

查看./config/webpack/loaders/sass.js，这个文件我没有修改过：

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const { env } = require('../configuration.js')

module.exports = {
  test: /\.(scss|sass|css)$/i,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } },
      { loader: 'postcss-loader', options: { sourceMap: true } },
      'resolve-url-loader',
      { loader: 'sass-loader', options: { sourceMap: true } }
    ]
  })
}

我只看到它尝试读取sass、scss和css文件。你有什么想法，我是否遗漏了什么或应该检查什么？

- Alf

Answer 1

您遇到了一个错误，因为在您的main.sass文件中导入了一个JS模块。 ~@blueprintjs/core 解析为 node_modules/@blueprintjs/core/dist/index.js，因此您会在过程中混合JS。

您应该查看blueprintjs/core/dist文件夹包含哪些文件，并仅导入文件以构建您的项目。

- Pavel Denisjuk

---

我尝试只导入blueprintjs/core/dist/blueprint.css，但也遇到了一个问题，似乎webpack试图导入js文件。此外，在这里的文档中：http://blueprintjs.com/docs/#blueprint.npm-installation 看起来作者希望我们只导入~@blueprintjs/core。 难道webpack加载器不应该只加载css/sass/scss文件吗？ - Alf

对于 webpack 而言，你引入的/require 的所有内容都只是一个“模块”。它不在乎它是 JS 还是任何其他文件（甚至是 JPEG）。从它们的文档中可以看到，“blueprint/core” 包含了一切（JS 和 CSS）——这意味着你只需从你的 JS 文件中导入整个库。Webpack 会负责将子引用传递给适当的加载器（如 CSS 或静态文件）。因此，只需删除你的 main.sass，并将导入语句移动到你的应用程序入口点等位置即可。 - Pavel Denisjuk

Answer 2

您只需要在App.css文件中添加以下代码：

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

- jsina