Webpack 无语义 UI 模块构建失败

Question

我一直在关注将无语义导入 webpack 项目的各种教程。但是，每当我完成不同的教程时，我都会收到相同的错误：

Module build failed:
module.exports = __webpack_public_path__ + "static/media/reset.b0bc6c14.less";
             ^
Unrecognised input
      in /Users/benflowers/Projects/candidate/candidate-ui-cra/node_modules/semantic-ui-less/definitions/globals/reset.less (line 1, column 15)

这是我的 webpack 配置的问题吗 - 我有一个弹出的 create-react-app webpack 配置，其中包含一些额外的加载器：

 {
        test: /.less$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            { loader: 'css-loader' },
            { loader: 'less-loader' }
          ]
        }),
        exclude: [/[/\]node_modules[/\]semantic-ui-less[/\]/]
      },
      // for semantic-ui-less files:
      {
        test: /.less$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            { loader: 'css-loader' },
            {
              loader: 'semantic-ui-less-module-loader',
              // you can also add specific options:
              options: { siteFolder: path.join(__dirname, 'src/site') }
            }
          ]
        }),
        include: [/[/\]node_modules[/\]semantic-ui-less[/\]/]
      },
      // loader for static assets
      {
        test: /.(png|jpg|jpeg|gif|svg)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10240,
            absolute: true,
            name: 'images/[path][name]-[hash:7].[ext]'
          }
        },
        include: [path.join(__dirname, 'src'), /[/\]node_modules[/\]semantic-ui-less[/\]/]
      }

根据 https://github.com/gadyonysh/semantic-ui-less-module-loader

Answer 1

我也有类似的问题。我刚刚添加到 webpack 配置

别名

  resolve: {
      ...
        alias     : {
            '../../theme.config$': path.join( __dirname, '../src/assets/theme/theme.config' )
          }
    },

更少的装载机

{
            test: /.less$/,
            use : ExtractTextPlugin.extract( {
              fallback: [ {
                loader: 'style-loader',
              } ],
              use     : [ 'css-loader', 'resolve-url-loader', 'less-loader', 'postcss-loader' ]
            } )
          },

并排除

{
                exclude: [
                    /.(config|overrides|variables)$/,
                    /.html$/,
                    /.(js|jsx)$/,
                    /.css$/,
                    /.json$/,
                    /.bmp$/,
                    /.gif$/,
                    /.jpe?g$/,
                    /.png$/,
                    /.scss$/,
                ],
                loader: require.resolve( 'file-loader' ),
                options: {
                    name: 'static/media/[name].[hash:8].[ext]',
                },
            },

请注意线路/.(config|overrides|variables($/，

Answer 2

将其添加到您的less排除应该可以解决问题：

exclude: [/.(js|jsx|mjs)$/, /.html$/, /.json$/, /.(less|config|variables|overrides)$/],