V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
buggg
V2EX  ›  前端开发

webpack 打包 antd 样式文件报错

  •  
  •   buggg · 2021-03-20 18:26:45 +08:00 · 1649 次点击
    这是一个创建于 1344 天前的主题,其中的信息可能已经有所发展或是发生改变。

    webpack loader 配置: { // antd less 转化 test: /.less$/, include: [path.join(PATHS.node, 'antd')], use: [ styleLoader, // 解释(interpret) @import 和 url() ,会 import/require() 后再解析(resolve)它们 { loader: 'css-loader' }, postcssLoader, { // less 代码转化 loader: 'less-loader', options: { modifyVars: { // 引入 antd 主题颜色覆盖文件 hack: true; @import "${path.join( PATHS.less, 'theme', 'antd-theme.less' )}"; // Override with less file }, javascriptEnabled: true } } ] } 报错信息: ERROR in ./node_modules/antd/es/alert/style/index.less (./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/src??ref--5-2!./node_modules/less-loader/dist/cjs.js!./node_modules/style-resources-loader/lib??ref--5-4!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--9-2!./node_modules/less-loader/dist/cjs.js??ref--9-3!./node_modules/antd/es/alert/style/index.less) Module build failed (from ./node_modules/less-loader/dist/cjs.js):

    @import "../../../../../less/theme/config.less"; var api = require("!../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); ^ Unrecognised input in C:\workspace\dapp-front\node_modules\antd\es\alert\style\index.less (line 6, column 8) 请大佬指点谢谢了

    izoabr
        1
    izoabr  
       2021-03-20 19:21:44 +08:00
    下次记得排一下版,还有记得要贴 package.json

    我个人的经验来看是 less 和 less loader 的版本很重要。
    ```
    "less": "3.9.0",
    "less-loader": "5",
    ```
    我用的是这两个版本,允许正常。
    buggg
        2
    buggg  
    OP
       2021-03-22 10:11:14 +08:00
    @izoabr 我也是这两个版本..."antd": "^4.8.5", "less": "^3.9.0", "less-loader": "^5.0.0",
    izoabr
        3
    izoabr  
       2021-03-22 10:31:15 +08:00
    把 node_modules 删掉,重新 install 一次试试
    buggg
        4
    buggg  
    OP
       2021-03-22 10:35:38 +08:00
    @izoabr 删了很多遍了, 我也有 cache clean, 还有就是, 我把全部文件复制到一个没有.git 仓库的文件夹中, 重新 install, 然后 start, 这时候又不报错了, 代码文件, Pakage.json 全都是一样的, 不知道哪里有问题...
    izoabr
        5
    izoabr  
       2021-03-22 10:36:44 +08:00
    options: { modifyVars: { // 引入 antd 主题颜色覆盖文件 hack: true; @import "${path.join( PATHS.less, 'theme', 'antd-theme.less' )}"; // Override with less file },
    这段配置去掉,你都 import less 了,就没必要去改 vars 了。
    izoabr
        6
    izoabr  
       2021-03-22 10:37:36 +08:00
    @buggg #4 那应该是 webpack eject 时机问题,确保 webpack 版本一致。
    buggg
        7
    buggg  
    OP
       2021-03-22 10:41:04 +08:00
    @izoabr yarn.lock 文件都是一样的, 版本应该也不会有错吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   961 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 21:03 · PVG 05:03 · LAX 13:03 · JFK 16:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.