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。请注意，在最后一个加载器之后没有!。因此，通过添加尾随!，告诉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加载器可以写成：

{
  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 - 找不到模块：错误：无法解析''（空字符串）

1 个答案: