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

【问题标题】：Why is my webpack trying to load .js files when compiling a .sass file?为什么我的 webpack 在编译 .sass 文件时尝试加载 .js 文件？
【发布时间】：2017-07-23 05:25:47
【问题描述】：

我正在尝试使用 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 文件。有什么我遗漏或应该检查的想法吗？

【问题讨论】：

标签： webpack webpack-dev-server blueprintjs

【解决方案1】：

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

您应该看到blueprintjs/core/dist 文件夹包含哪些文件，并且只导入sass/scss/css 文件来进行构建。

【讨论】：

我尝试只导入 blueprintjs/core/dist/blueprint.css 但也遇到了问题，看起来 webpack 正在尝试导入 js 文件。另外，从这里的文档中：blueprintjs.com/docs/#blueprint.npm-installation 似乎作者希望我们只导入 ~@blueprintjs/core webpack 加载器不应该知道只加载 css/sass/scss 文件吗？
对于 webpack，你导入/需要的所有东西都只是一个module。它不关心它是 JS 还是任何其他文件（甚至是 JPEG）。从他们的文档中，它说blueprint/core 包含所有东西（JS 和 CSS）——这意味着你应该从你的 JS 文件中导入整个库。 Webpack 反过来会负责将子导入传递给适当的加载器（如 CSS 或静态文件）。因此，只需删除您的 main.sass 并将导入语句移动到例如您的应用程序的入口点。

【解决方案2】：

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

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

【讨论】：