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

Posted 2023-02-22

【中文标题】设置 Material UI 套件 React 时，Sass-Loader 的模块构建失败

【英文标题】：Module build failed from Sass-Loader when setting up Material UI kit React

【发布时间】：2019-09-09 16:29:13

【问题描述】：

我的环境 我有一个使用 React Native 的 RoR 应用程序设置。我的开发环境使用 rails server 和 webpack。

尝试添加 UI 库 我将docs中要求的材料ui文件添加到我的ReactJS应用程序中。

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

编译时出现如下错误：

Resolve-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)

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

【参考方案1】：

我有一个文件，其中所有其他 scss 被导入并与一个和另一个连接。不幸的是，编译器没有考虑到这一点，并单独读取每个文件，说明丢失的文件，所以我不得不使用@import将丢失的文件导入到每个单独的scss文件中。马虎的解决方案，但它的工作。

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