设置 Material UI 套件 React 时，Sass-Loader 模块构建失败

Question

我的环境 我已经使用 React Native 设置了 RoR 应用程序。我的开发环境使用 rails 服务器和 webpack。

尝试添加UI库 我在 docs 中将 material ui 文件作为 required 添加到我的 ReactJS 应用程序中。

我的问题 当运行我的应用程序将 Material UI 文件添加到我的根 ReactJS 文件夹后

编译时出现以下错误：

解决-url-loader设置不正确按照这个错误

WARNING in ./app/javascript/components/assets/scss/material-kit-react.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/resolve-url-loader??ref--7-3!./node_modules/sass-loader/lib/loader.js??ref--7-4!./app/javascript/components/assets/scss/material-kit-react.scss)
Module Warning (from ./node_modules/resolve-url-loader/index.js):
resolve-url-loader: loader misconfiguration
  "attempts" option is defunct (consider "join" option if search is needed)

不正确的 resolve-url-loader 设置导致多米诺骨牌效应错误，引用 sass/scss 不起作用。

ERROR in ./app/javascript/components/assets/scss/plugins/_plugin-react-datetime.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/resolve-url-loader??ref--7-3!./node_modules/sass-loader/lib/loader.js??ref--7-4!./app/javascript/components/assets/scss/plugins/_plugin-react-datetime.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

  border-color: $white-color !important;
               ^
      Undefined variable: "$white-color".
      in /home/ubuntu/workspace/backend/app/javascript/components/assets/scss/plugins/_plugin-react-datetime.scss (line 116, column 17)

我已经尝试将以下节点库添加到我的应用程序


"devDependencies": {
    "css-loader": "^2.1.1",
    "mini-css-extract-plugin": "^0.6.0",
    "node-sass": "^4.11.0",
    "resolve-url-loader": "^3.1.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  }

在我的主根文件夹

中创建并配置了一个 webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/styles.scss',

  mode: 'development',

  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        include: [
          path.resolve(__dirname, './static/img'),
        ],
        use: {
          loader: 'file-loader',
          options: {
            name: '[name]-[hash].[ext]',
          },
        },
      },
      {
        test: /\.svg$/,
        use: {
          loader: 'svg-inline-loader',
          options: {
            name: '[name]-[hash].[ext]',
          },
        },
      },
      {test: /\/src\/js\/(?:.*)\.css$/, use: [{loader: 'style-loader'}, {loader: 'css-loader'}]},
      {
        test: [/\.scss$/, /\.sass$/],
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'resolve-url-loader',
            options: {
              debug: true,
              root: path.join(__dirname, './static/img'),
              includeRoot: true,
              absolute: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              outputStyle: 'compressed',
              sourceMap: true,
              includePaths: [
                './app/javascript/components/assets/scss',
              ],
            },
          },
        ],
      },
    ],
  },

  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/app/javascript/components/assets/scss',
  },

  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: '[name]-[chunkhash].css',
      chunkFilename: '[name]-[chunkhash].css', // Ensure each chunk has a unique id
    }),
  ],

  devtool: 'source-map'
};

将 sass 加载程序添加到 environment.js 文件

./config/webpack/environment.js

const { environment } = require('@rails/webpacker')

// resolve-url-loader must be used before sass-loader
environment.loaders.get('sass').use.splice(-1, 0, {
  loader: 'resolve-url-loader',
  options: {
    attempts: 1
  }
});

module.exports = environment

我也试过了npm rebuild node-sass

在我尝试配置 webpack 和 resolve-url-loader 之后，我仍然无法让它工作。我看了他们各自的文档，其他问题和解决方案，但即使是 resolve-url-loader 自己的文档也说很难配置。

我希望能够编译和处理我的应用程序文件夹中的 scss/sass 个文件

当前文件夹结构

./ (root folder)
  ./Webpack.config.js
  ./Config/webpack/environment
  ./App/javascript ( root folder react app)

如果您需要更多信息，请问我

Answer 1

我有一个文件，其中所有其他文件 scss 在导入时都相互关联。不幸的是，编译器没有考虑到这一点，而是单独读取每个文件，指出文件丢失，所以我不得不使用 @import 添加导入丢失的文件到每个单独的 scss 文件中。草率的解决方案，但它奏效了。

任何更好的答案都会在我的答案之后标记为答案

Answer 2

旁注：正如 Sass 文档enter link description here 中所述，@import 将在未来几年逐渐被淘汰。我也对这里的更好解决方案感兴趣。

设置 Material UI 套件 React 时，Sass-Loader 模块构建失败

Module build failed from Sass-Loader when setting up Material UI kit React

ruby-on-rails

reactjs

webpack

cloud9

resolve-url-loader