为什么在我引用antd的时候,还需要在webpack中再次less-loader解析antd的样式?

发布于 2022-09-11 16:13:22 字数 2373 浏览 11 评论 0

利用webpck-dev-server构建
clipboard.png
webpack config见下,在less解析中,如果不解析antd样式,会报出如下错误

ERROR in ./node_modules/antd/lib/message/style/index.less 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
> @import "../../style/themes/default";
| @import "../../style/mixins/index";
|

clipboard.png

此处webpack配置

const path = require('path')
const webpack = require('webpack')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

const webpackConfig = {
  entry: './example/index.js',
  output: {
    path: '/',
    filename: '[name].[hash:7].js'
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
    alias: {
      'src': path.resolve(__dirname, '../src'),
      'example': path.resolve(__dirname, '../example')
    },
    modules: ['../src/components', 'node_modules']
  },
  devServer: {
    host: '0.0.0.0',
    port: 6666,
    publicPath: '/',
    noInfo: true
  },
  module: {
    rules: [
      {
        test: /\.(jsx?| js)$/,
        loader: 'babel-loader',
        include: [resolve('example'), resolve('src')],
        query: {
          presets: ['env', 'stage-0', 'react'],
          plugins: [
            'babel-plugin-transform-decorators-legacy',
            'transform-class-properties',
            ['import', {
              'libraryName': 'antd',
              'style': true
            }],
            'transform-runtime',
            'transform-object-rest-spread'
          ]
        }
      },
      {
        test: /\.(less|css)$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'less-loader',
            options: {
              javascriptEnabled: true
            }
          }
        ],
        include: [resolve('example'), resolve('src'), resolve('node_modules/antd/lib')]
        // exclude: /(node_modules)/
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ]
}

module.exports = webpackConfig

但如果解析antd样式,服务直接卡死,求大神指导

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文