javascript - 模块无法在 React App 中加载。获取 "ERROR in ./~/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js"

Question

尝试将我的项目从 css 转换为 sass 时出现错误。我想我已经加载了正确的模块，但似乎这些模块没有正确加载。这是我得到的错误。

ERROR in ./~/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js
Module build failed: Error: ENOENT: no such file or directory, open   '/Volumes/server2/Desktop/JavaScript/invoiced-ui/node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js'
@ ./~/react-router/es/withRouter.js 6:0-51
@ ./~/react-router/es/index.js
@ ./app/index.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-  server ./app

ERROR in ./~/css-loader?{"modules":true,"importLoaders":1,"localIdentName":"   [path]_[name]_[local]_[hash:base64:5]"}!./~/sass-loader/lib/loader.js?{"includePaths":["./vendor","./app"]}!./app/components/Collection.sass
Module build failed: Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (59)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v3.13.1
at module.exports (/Volumes/server2/Desktop/JavaScript/invoiced-ui/node_modules/node-sass/lib/binding.js:13:13)
at Object.<anonymous> (/Volumes/server2/Desktop/JavaScript/invoiced-ui/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (module.js:660:30)
at Object.Module._extensions..js (module.js:671:10)
at Module.load (module.js:573:32)
at tryModuleLoad (module.js:513:12)
at Function.Module._load (module.js:505:3)
at Module.require (module.js:604:17)
at require (internal/module.js:11:18)
at Object.sassLoader (/Volumes/server2/Desktop/JavaScript/invoiced-ui/node_modules/sass-loader/lib/loader.js:46:72)
 @ ./app/components/Collection.sass 4:14-148 13:2-17:4 14:20-154
 @ ./app/components/Collection.js
 @ ./app/components/index.js
 @ ./app/routes.js
 @ ./app/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-  server ./app

我正在使用 yarn 来加载依赖项，想知道是否有一些我应该用 Webpack 完成的事情？下面是我的 webpack，我想知道这里是否缺少什么？

const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
app: './app',
 },
 output: {
path: __dirname,
publicPath: '/',
filename: '[name].js',
chunkFilename: '[id].js',
},
devServer: {
hot: true,
inline: true,
historyApiFallback: true,
},
resolve: {
modules: ['node_modules', 'lib', 'app', 'vendor'],
},
module: {
rules: [
  {
    test: /\.css$/,
    use: [
      'style-loader',
      'css-loader',
    ],
  }, {
    test: /\.(jpe?g|png|gif|svg)$/i,
    use: [
      {
        loader: 'file-loader',
        options: {
          hash: 'sha512',
          digest: 'hex',
          name: '[hash].[ext]',
        },
      }, {
        loader: 'image-webpack-loader',
        options: {
          bypassOnDebug: true,
        },
      },
    ],
  }, {
    test: /\.(scss|sass)$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader',
      options: {
        modules: true,
        importLoaders: 1,
        localIdentName: '[path]_[name]_[local]_[hash:base64:5]',
      },
    }, {
      loader: 'sass-loader',
      options: {
        includePaths: ['./vendor', './app'],
      },
    }],
  },
  {
    test: /\.(js|jsx)$/,
    exclude: /(node_modules|bower_components)/,
    loader: 'babel-loader',
    query: {
      presets: ['es2015', 'stage-0', 'react'],
      plugins: ['transform-runtime', 'transform-decorators-legacy'],
    },
  },
],
},
 plugins: [
],
};

Answer 1

检查合适的样式、css 和 sass 加载器以及它们的使用顺序:style -> css -> sass