Antd style package does not come in.

the whole project is ts architecture. This is my babelrc configuration. The style of the project is written in less, but when "style" is set to true, the style cannot be packaged. Only when it is set to css can it be packaged.

{
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ],
    "react",
    "stage-2"
  ],
  "plugins": [
    "react-hot-loader/babel",
    [
      "import",
      {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": "css" // true
      }
    ],
    [
      "transform-runtime",
      {
        "helpers": false,
        "polyfill": true,
        "regenerator": true,
        "moduleName": "babel-runtime"
      }
    ]
  ]
}

this is my webpack.base.js configuration

const path = require("path");
const fs = require("fs");
const lessToJs = require("less-vars-to-js");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const command = process.argv.slice(2)[0];
const env = command.substring(command.indexOf("=") + 1);
const devUrlLoader = "url-loader?limit=8192&name=[hash:8].[name].[ext]";
const prodUrlLoader = "url-loader?limit=8192&name=[hash:8].[name].[ext]&outputPath=assets/images/&publicPath=assets/images";

// antd
const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, "../src/assets/style/theme.less"), "utf8"));

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: ["babel-loader", "ts-loader"],
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loaders: ["babel-loader"],
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: [{
            loader: "css-loader",
          }],
          fallback: "style-loader",
        }),
      },
      {
        test: /\.sass$/,
        use: ["style-loader", "css-loader", "sass-loader?outputStyle=expanded&indentedSyntax"],
      }, {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader?outputStyle=expanded"],
      },
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          use: [{
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: true,
              namedExport: true,
              camelCase: true,
              minimize: true,
              localIdentName: "[path][name]__[local]--[hash:base64:5]",
            },
          }, {
            loader: "postcss-loader",
            options: {
              ident: "postcss",
              sourceMap: true,
              plugins: loader => [
                require("postcss-import")(),
                // require("stylelint")(),
                require("autoprefixer")({
                  browsers: ["last 15 versions"],
                }),
              ],
            },
          },
          {
            loader: "less-loader",
            options: {
              javascriptEnabled: true,
              //modifyVars: themeVariables,
            },
          }],
          fallback: "style-loader",
        }),
      },
      {
        test: /\.(png|jpe?g|gif|woff|woff2|ttf|eot)$/,
        loader: env === "dev" ? devUrlLoader : prodUrlLoader,
      },
      {
        test: /\.svg$/,
        loader: "svg-sprite-loader",
      },
    ],
  },
  resolve: {
    modules: [
      path.join(__dirname, "src"),
      "node_modules",
    ],
    extensions: [".js", ".json", ".jsx", ".ts", ".tsx"],
    alias: {
      config: path.resolve(__dirname, "src/config/"),
      shared: path.resolve(__dirname, "src/shared/"),
      utils: path.resolve(__dirname, "src/utils/"),
    },
  },
};

configuration of my webpack.dev.js

/*
 * @ author wanliyunyan
 * @ github  https://github.com/wanliyunyan
 * @ use webpack
 */
const commonConfig = require("./webpack.base.js");
const path = require("path");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = function (env) {
  return Object.assign({}, commonConfig, {
    cache: true,
    devtool: "source-map",
    entry: {
      bundle: [
        "babel-polyfill",
        "react-hot-loader/patch",
        "webpack-dev-server/client?http://localhost:8000",
        "webpack/hot/only-dev-server",
        "./src/index.tsx",
      ],
      vendor: ["react", "react-dom"],
      lib: ["antd"],
    },
    output: {
      path: path.join(__dirname, "/../dist/assets/"),
      filename: "[name].js",
      publicPath: "/assets/",
      sourceMapFilename: "[name].map",
    },
    devServer: {
      historyApiFallback: true,
      noInfo: false,
      hot: true,
      open: true,
      stats: "minimal",
      contentBase: "./src/",
      publicPath: "/assets/",
      compress: true,
      port: 8000,
      proxy: {
        "/api/v1/*": {
          target: "http://10.23.13.207:8001", // server
          secure: false,
          changeOrigin: true,
        },
      },
    },
    optimization: {
      runtimeChunk: {
        name: "manifest",
      },
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new ExtractTextPlugin({
        filename: "style.css",
        disable: false,
        allChunks: true,
      }),
    ],
  });
};

if you want to test the project, you can visit my github, and download the npm to see the page

.
Mar.05,2021

      {
        test: /\.less$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
          use: [{
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              namedExport: true,
              camelCase: true,
              minimize: true,
              localIdentName: '[path][name]__[local]--[hash:base64:5]',
            },
          }, {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              sourceMap: true,
              plugins: loader => [
                require('postcss-import')(),
                require('autoprefixer')({
                  browsers: ['last 15 versions'],
                }),
              ],
            },
          },
          {
            loader: 'less-loader',
            options: {
              javascriptEnabled: true,
              modifyVars: themeVariables,
            },
          }],
          fallback: 'style-loader',
        }),
      },
      {
        test: /\.less$/,
        exclude: /src/,
        use: ExtractTextPlugin.extract({
          use: [{
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            },
          }, {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              sourceMap: true,
              plugins: loader => [
                require('postcss-import')(),
                require('autoprefixer')({
                  browsers: ['last 15 versions'],
                }),
              ],
            },
          },
          {
            loader: 'less-loader',
            options: {
              javascriptEnabled: true,
              modifyVars: themeVariables,
            },
          }],
          fallback: 'style-loader',
        }),
      },

exclude node module when css module

Menu