Webpack semantic-ui-less模块​​构建失败

Question

我一直在关注将semantic-ui-less导入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[\/\\]/] } webpack配置和一些额外的加载器：

<div class="form-group mx-sm-1">
    <select id="customer" name="customer" type="form-control" class="form-control" multiple></select>
</div>

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

Answer 1

我有类似的问题。 我刚刚添加到webpack config

<强> ALIAS

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

LESS LOADER

{
            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]',
                },
            },

请注意线路 的 /（配置|覆盖|变量）。$ /，

Answer 2

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

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