1

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

尝试添加 UI 库我将文档 中需要的材料 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 自己的文档也说它很难配置。

我希望能够在我的 app 文件夹中编译和处理 scss/sass 文件

当前文件夹结构

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

请问我是否需要更多信息

4

2 回答 2

1

I had one file where all the other scss while got imported and where connected with one and other. Unfortunately the compiler did not take this into in account and read each file sepertly stating that files where missing so I had to add the import the missing files into each separate scss file, using @import. Sloppy solution but it worked.

Any better answer can will be marked as answer after mine

于 2019-04-30T14:18:43.623 回答
0

Sidenote: @import will gradually be phased out over the years as stated in the Sass docsenter link description here. I am also interested in a better solution here.

于 2022-02-22T22:44:05.813 回答