webpack2 sass-loader - 找不到模块:错误:无法解析''(空字符串)

Question

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

这是我从App.jsx加载sass文件的方法 require('./../../style/style.scss')

我收到以下错误:

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-所示