webpack2 sass-loader – Module not found: Error: Can't resolve '' (empty string)

Question

我很难用 webpack2 加载 sass 文件。至少我认为这是问题所在，因为如果我注释掉 sass 加载行，则不会出现错误。

这就是我从 App.jsx require('./../../style/style.scss')

加载 sass 文件的方式

我收到以下错误：

ERROR in ./src/components/App.jsx
Module not found: Error: Can't resolve '' in '/Users/user/code/my_site.com'
resolve '' in '/Users/user/code/my_site.com'
  using description file: /Users/user/code/my_site.com/package.json (relative path: .)
  after using description file: /Users/user/code/my_site.com/package.json (relative path: .)
    using description file: /Users/user/code/my_site.com/package.json (relative path: .)
      no extension
        /Users/user/code/my_site.com is not a file
      .js
        /Users/user/code/my_site.com.js doesn't exist
      .json
        /Users/user/code/my_site.com.json doesn't exist
      as directory
        existing directory
          using path: /Users/user/code/my_site.com/index
            using description file: /Users/user/code/my_site.com/package.json (relative path: ./index)
              no extension
                /Users/user/code/my_site.com/index doesn't exist
              .js
                /Users/user/code/my_site.com/index.js doesn't exist
              .json
                /Users/user/code/my_site.com/index.json doesn't exist
          use ./index.js from main in package.json
            using description file: /Users/user/code/my_site.com/package.json (relative path: .)
            after using description file: /Users/user/code/my_site.com/package.json (relative path: .)
              using description file: /Users/user/code/my_site.com/package.json (relative path: ./index.js)
                as directory
                  /Users/user/code/my_site.com/index.js doesn't exist
                no extension
                  /Users/user/code/my_site.com/index.js doesn't exist
                .js
                  /Users/user/code/my_site.com/index.js.js doesn't exist
                .json
                  /Users/user/code/my_site.com/index.js.json doesn't exist
[/Users/user/code/my_site.com]
[/Users/user/code/my_site.com.js]
[/Users/user/code/my_site.com.json]
[/Users/user/code/my_site.com/index]
[/Users/user/code/my_site.com/index.js]
[/Users/user/code/my_site.com/index.js]
[/Users/user/code/my_site.com/index.js]
[/Users/user/code/my_site.com/index.json]
[/Users/user/code/my_site.com/index.js.js]
[/Users/user/code/my_site.com/index.js.json]
 @ ./src/components/App.jsx 33:0-35
 @ ./src/index.jsx
 @ multi ./src/index.jsx ./src/index.jsx

我的webpack.config:

var webpack = require("webpack")
var path = require("path")
module.exports = {
  entry: './src/index.jsx',
  output: { path: path.join(__dirname, "./build/"), filename: 'bundle.js' },
  devtool: 'source-map',
  module: {
    loaders: [
      { test: /^((?!config).)*\.jsx?$/, loader: 'babel-loader',
        exclude: /node-modules/,
        query: { presets: ['es2015', 'react'] }
      },
      { test: /\.css$/, loader: 'style-loader!css-loader!' }, 
      { test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader!?sourceMap=true' }, 
      { test: /\.(woff|woff2)$/,  loader: "url-loader?limit=10000&mimetype=application/font-woff" },
      { test: /\.ttf$/, loader: "file-loader" },
      { test: /\.eot$/, loader: "file-loader" },
      { test: /\.svg$/, loader: "file-loader" }
    ]
  }
}

我也尝试使用新的 rules: ... - use: ... 语法，但没有成功。也许我遗漏了一些关于加载程序如何工作的信息？

Answer 1

您可以通过 ! 分隔多个加载程序来链接它们。例如 style-loader!css-loader 会同时通过 css-loader 和 style-loader。注意最后一个loader后面没有!。所以通过添加尾随 ! 你告诉 webpack 它后面的任何东西都是一个加载器，它是一个空字符串。

对于您的 .css 文件，它会立即引起注意，但在您的 .scss 配置中，它要微妙得多，因为您使用 ?sourceMap=true 添加了一个选项。要解决您的问题，您需要在最后一个加载程序之后删除 !：

{ test: /\.css$/, loader: 'style-loader!css-loader' }, 
{ test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader?sourceMap=true' },

Webpack 2 现在还提供了指定加载器列表的可能性，这使得它更容易阅读 https://webpack.js.org/guides/migrating/#chaining-loaders

{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, 
{
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader?sourceMap=true']
},

此外，这允许您将选项指定为 JavaScript 对象，而不必将其转换为字符串。所以你的 .scss loader 可以写成：

{
  test: /\.scss$/,
  use: [
    'style-loader',
    'css-loader',
    { loader: 'sass-loader', options: { sourceMap: true } }
  ]
},

如图https://webpack.js.org/guides/migrating/#what-are-options-

webpack2 sass-loader – Module not found: Error: Can't resolve '' (empty string)

webpack2 sass-loader – Module not found: Error: Can't resolve '' (empty string)

sass

webpack-2