webpack2 sass-loader - 找不到模块：错误：无法解析''（空字符串）

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-