在 React Application 中导入 scss 时出错

Question

您好，我在尝试导入 sass-loader 时遇到此错误。

错误 ./~/css-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./src/styles/main.scss 未找到模块：错误：无法解析 '../../static/fonts/OpenSans-Regular.woff2' 在 'D:\KumarYa1\Workplace\React\git_react\ReactApp\src\styles' @ ./~/css-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./src/styles/main.scss 6:1027-1079@./src/styles/main.scss@./renderer.js

webpack.config.js

module.exports = {
  entry: "./renderer.js",
  output: {
    filename: "public/bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/, 
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      },
      {
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=10000&mimetype=application/font-woff'
        },

      {
        test   : /\.css$/,
        loaders: ['style-loader', 'css-loader', 'resolve-url-loader']
      }, 
      {
        test   : /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
      }
    ]
  }
}

Answer 1

您能否尝试将解析 URL 添加到 scss 加载程序？

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