search

umijs / dumi

📖 Static Site Generator for component library development
https://d.umijs.org
MIT License
3.56k stars 1.18k forks source link

bug: postcss在dumi build时报错 #1228

Open yehuozhili opened 1 year ago

yehuozhili commented 1 year ago

我使用npx @umijs/create-dumi-lib 创建了一个项目，安装@cainiaofe/cn-ui，然后就在src的Foo的index.tsx中加入：

import { CnTable } from '@cainiaofe/cn-ui';
console.log(CnTable);

运行npm run start 一切正常。 运行npm run docs:build 报错 报错如下：

   ERROR in ./node_modules/_@cainiaofe_cn-ui@0.7.16@@cainiaofe/cn-ui/es/components/cn-async-jobs-pro/components/job-message/index.scss
    Module build failed (from ./node_modules/_@umijs_bundler-webpack@3.5.34@@umijs/bundler-webpack/lib/webpack/plugins/mini-css-extract-plugin/src/loader.js):
    ModuleBuildError: Module build failed (from ./node_modules/_postcss-loader@3.0.0@postcss-loader/src/index.js):
    ParserError: Syntax Error at line: 1, column 43
        at D:\project\prr\ttt\node_modules\_@cainiaofe_cn-ui@0.7.16@@cainiaofe\cn-ui\es\components\cn-async-jobs-pro\components\job-message\index.scss:1:123
        at Parser.error (D:\project\prr\ttt\node_modules\_postcss-values-parser@2.0.1@postcss-values-parser\lib\parser.js:127:11)
        at Parser.operator (D:\project\prr\ttt\node_modules\_postcss-values-parser@2.0.1@postcss-values-parser\lib\parser.js:162:20)
        at Parser.parseTokens (D:\project\prr\ttt\node_modules\_postcss-values-parser@2.0.1@postcss-values-parser\lib\parser.js:245:14)
        at Parser.loop (D:\project\prr\ttt\node_modules\_postcss-values-parser@2.0.1@postcss-values-parser\lib\parser.js:132:12)
        at Parser.parse (D:\project\prr\ttt\node_modules\_postcss-values-parser@2.0.1@postcss-values-parser\lib\parser.js:51:17)
        at parse (D:\project\prr\ttt\node_modules\_postcss-custom-properties@8.0.11@postcss-custom-properties\src\lib\postcss-values-parser.js:4:29)
        at callback (D:\project\prr\ttt\node_modules\_postcss-custom-properties@8.0.11@postcss-custom-properties\src\lib\transform-properties.js:11:21)
        at callback (D:\project\prr\ttt\node_modules\_postcss@7.0.39@postcss\lib\container.es6:161:18)
        at callback (D:\project\prr\ttt\node_modules\_postcss@7.0.39@postcss\lib\container.es6:110:18)
        at Rule.each (D:\project\prr\ttt\node_modules\_postcss@7.0.39@postcss\lib\container.es6:76:16)
        at Rule.walk (D:\project\prr\ttt\node_modules\_postcss@7.0.39@postcss\lib\container.es6:107:17)
        at callback (D:\project\prr\ttt\node_modules\_postcss@7.0.39@postcss\lib\container.es6:121:24)
        at Root.each (D:\project\prr\ttt\node_modules\_postcss@7.0.39@postcss\lib\container.es6:76:16)
        at Root.walk (D:\project\prr\ttt\node_modules\_postcss@7.0.39@postcss\lib\container.es6:107:17)
        at Root.walkDecls (D:\project\prr\ttt\node_modules\_postcss@7.0.39@postcss\lib\container.es6:159:19)
        at transformProperties (D:\project\prr\ttt\node_modules\_postcss-custom-properties@8.0.11@postcss-custom-properties\src\lib\transform-properties.js:8:7)
        at Object.plugin (D:\project\prr\ttt\node_modules\_postcss-custom-properties@8.0.11@postcss-custom-properties\src\index.js:24:3)
        at D:\project\prr\ttt\node_modules\_postcss-preset-env@6.7.0@postcss-preset-env\src\postcss.js:104:19
        at D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:109216:20
        at D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:61151:11
        at D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:61017:18
        at context.callback (D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:60895:13)
        at D:\project\prr\ttt\node_modules\_postcss-loader@3.0.0@postcss-loader\src\index.js:208:9
     @ ./node_modules/_@cainiaofe_cn-ui@0.7.16@@cainiaofe/cn-ui/es/components/cn-async-jobs-pro/components/job-message/index.js 5:0-22
     @ ./node_modules/_@cainiaofe_cn-ui@0.7.16@@cainiaofe/cn-ui/es/components/cn-async-jobs-pro/components/job-panel/index.js
     @ ./node_modules/_@cainiaofe_cn-ui@0.7.16@@cainiaofe/cn-ui/es/components/cn-async-jobs-pro/components/job-container/index.js
     @ ./node_modules/_@cainiaofe_cn-ui@0.7.16@@cainiaofe/cn-ui/es/components/cn-async-jobs-pro/async-jobs-pro.js
     @ ./node_modules/_@cainiaofe_cn-ui@0.7.16@@cainiaofe/cn-ui/es/components/cn-async-jobs-pro/index.js
     @ ./node_modules/_@cainiaofe_cn-ui@0.7.16@@cainiaofe/cn-ui/es/index.js
     @ ./src/Foo/index.tsx
     @ ./src/index.ts
     @ ./src/.umi-production/dumi/demos/index.ts
     @ ./src/.umi-production/dumi/layout.tsx
     @ ./src/.umi-production/core/routes.ts
     @ ./src/.umi-production/umi.ts
     @ multi ./src/.umi-production/umi.ts

    ERROR in ./node_modules/_@cainiaofe_cn-ui@0.7.16@@cainiaofe/cn-ui/es/components/cn-async-jobs-pro/components/job-panel/index.scss
    Module build failed (from ./node_modules/_@umijs_bundler-webpack@3.5.34@@umijs/bundler-webpack/lib/webpack/plugins/mini-css-extract-plugin/src/loader.js):
    ModuleBuildError: Module build failed (from ./node_modules/_postcss-loader@3.0.0@postcss-loader/src/index.js):
    ParserError: Syntax Error at line: 1, column 43
        at D:\project\prr\ttt\node_modules\_@cainiaofe_cn-ui@0.7.16@@cainiaofe\cn-ui\es\components\cn-async-jobs-pro\components\job-panel\index.scss:1:123
        at Parser.error (D:\project\prr\ttt\node_modules\_postcss-values-parser@2.0.1@postcss-values-parser\lib\parser.js:127:11)
        at Parser.operator (D:\project\prr\ttt\node_modules\_postcss-values-parser@2.0.1@postcss-values-parser\lib\parser.js:162:20)
        at Parser.parseTokens (D:\project\prr\ttt\node_modules\_postcss-values-parser@2.0.1@postcss-values-parser\lib\parser.js:245:14)
        at Parser.loop (D:\project\prr\ttt\node_modules\_postcss-values-parser@2.0.1@postcss-values-parser\lib\parser.js:132:12)
        at Parser.parse (D:\project\prr\ttt\node_modules\_postcss-values-parser@2.0.1@postcss-values-parser\lib\parser.js:51:17)
        at parse (D:\project\prr\ttt\node_modules\_postcss-custom-properties@8.0.11@postcss-custom-properties\src\lib\postcss-values-parser.js:4:29)
        at callback (D:\project\prr\ttt\node_modules\_postcss-custom-properties@8.0.11@postcss-custom-properties\src\lib\transform-properties.js:11:21)
        at callback (D:\project\prr\ttt\node_modules\_postcss@7.0.39@postcss\lib\container.es6:161:18)
        at callback (D:\project\prr\ttt\node_modules\_postcss@7.0.39@postcss\lib\container.es6:110:18)
        at Rule.each (D:\project\prr\ttt\node_modules\_postcss@7.0.39@postcss\lib\container.es6:76:16)
        at Rule.walk (D:\project\prr\ttt\node_modules\_postcss@7.0.39@postcss\lib\container.es6:107:17)
        at callback (D:\project\prr\ttt\node_modules\_postcss@7.0.39@postcss\lib\container.es6:121:24)
        at Root.each (D:\project\prr\ttt\node_modules\_postcss@7.0.39@postcss\lib\container.es6:76:16)
        at Root.walk (D:\project\prr\ttt\node_modules\_postcss@7.0.39@postcss\lib\container.es6:107:17)
        at Root.walkDecls (D:\project\prr\ttt\node_modules\_postcss@7.0.39@postcss\lib\container.es6:159:19)
        at transformProperties (D:\project\prr\ttt\node_modules\_postcss-custom-properties@8.0.11@postcss-custom-properties\src\lib\transform-properties.js:8:7)
        at Object.plugin (D:\project\prr\ttt\node_modules\_postcss-custom-properties@8.0.11@postcss-custom-properties\src\index.js:24:3)
        at D:\project\prr\ttt\node_modules\_postcss-preset-env@6.7.0@postcss-preset-env\src\postcss.js:104:19
        at D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:109216:20
        at D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:61151:11
        at D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:61017:18
        at context.callback (D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:60895:13)
        at D:\project\prr\ttt\node_modules\_postcss-loader@3.0.0@postcss-loader\src\index.js:208:9
     @ ./node_modules/_@cainiaofe_cn-ui@0.7.16@@cainiaofe/cn-ui/es/components/cn-async-jobs-pro/components/job-panel/index.js 15:0-22
     @ ./node_modules/_@cainiaofe_cn-ui@0.7.16@@cainiaofe/cn-ui/es/components/cn-async-jobs-pro/components/job-container/index.js
     @ ./node_modules/_@cainiaofe_cn-ui@0.7.16@@cainiaofe/cn-ui/es/components/cn-async-jobs-pro/async-jobs-pro.js
     @ ./node_modules/_@cainiaofe_cn-ui@0.7.16@@cainiaofe/cn-ui/es/components/cn-async-jobs-pro/index.js
     @ ./node_modules/_@cainiaofe_cn-ui@0.7.16@@cainiaofe/cn-ui/es/index.js
     @ ./src/Foo/index.tsx
     @ ./src/index.ts
     @ ./src/.umi-production/dumi/demos/index.ts
     @ ./src/.umi-production/dumi/layout.tsx
     @ ./src/.umi-production/core/routes.ts
     @ ./src/.umi-production/umi.ts
     @ multi ./src/.umi-production/umi.ts

    ERROR in ./node_modules/_@cainiaofe_cn-ui@0.7.16@@cainiaofe/cn-ui/es/components/cn-async-jobs-pro/index.scss
    Module build failed (from ./node_modules/_@umijs_bundler-webpack@3.5.34@@umijs/bundler-webpack/lib/webpack/plugins/mini-css-extract-plugin/src/loader.js):
    ModuleBuildError: Module build failed (from ./node_modules/_postcss-loader@3.0.0@postcss-loader/src/index.js):
    ParserError: Syntax Error at line: 1, column 43
        at D:\project\prr\ttt\node_modules\_@cainiaofe_cn-ui@0.7.16@@cainiaofe\cn-ui\es\components\cn-async-jobs-pro\index.scss:1:123
        at Parser.error (D:\project\prr\ttt\node_modules\_postcss-values-parser@2.0.1@postcss-values-parser\lib\parser.js:127:11)
        at Parser.operator (D:\project\prr\ttt\node_modules\_postcss-values-parser@2.0.1@postcss-values-parser\lib\parser.js:162:20)
        at Parser.parseTokens (D:\project\prr\ttt\node_modules\_postcss-values-parser@2.0.1@postcss-values-parser\lib\parser.js:245:14)
        at Parser.loop (D:\project\prr\ttt\node_modules\_postcss-values-parser@2.0.1@postcss-values-parser\lib\parser.js:132:12)
        at Parser.parse (D:\project\prr\ttt\node_modules\_postcss-values-parser@2.0.1@postcss-values-parser\lib\parser.js:51:17)
        at parse (D:\project\prr\ttt\node_modules\_postcss-custom-properties@8.0.11@postcss-custom-properties\src\lib\postcss-values-parser.js:4:29)
        at callback (D:\project\prr\ttt\node_modules\_postcss-custom-properties@8.0.11@postcss-custom-properties\src\lib\transform-properties.js:11:21)
        at callback (D:\project\prr\ttt\node_modules\_postcss@7.0.39@postcss\lib\container.es6:161:18)
        at callback (D:\project\prr\ttt\node_modules\_postcss@7.0.39@postcss\lib\container.es6:110:18)
        at Rule.each (D:\project\prr\ttt\node_modules\_postcss@7.0.39@postcss\lib\container.es6:76:16)
        at Rule.walk (D:\project\prr\ttt\node_modules\_postcss@7.0.39@postcss\lib\container.es6:107:17)
        at callback (D:\project\prr\ttt\node_modules\_postcss@7.0.39@postcss\lib\container.es6:121:24)
        at Root.each (D:\project\prr\ttt\node_modules\_postcss@7.0.39@postcss\lib\container.es6:76:16)
        at Root.walk (D:\project\prr\ttt\node_modules\_postcss@7.0.39@postcss\lib\container.es6:107:17)
        at Root.walkDecls (D:\project\prr\ttt\node_modules\_postcss@7.0.39@postcss\lib\container.es6:159:19)
        at transformProperties (D:\project\prr\ttt\node_modules\_postcss-custom-properties@8.0.11@postcss-custom-properties\src\lib\transform-properties.js:8:7)
        at Object.plugin (D:\project\prr\ttt\node_modules\_postcss-custom-properties@8.0.11@postcss-custom-properties\src\index.js:24:3)
        at D:\project\prr\ttt\node_modules\_postcss-preset-env@6.7.0@postcss-preset-env\src\postcss.js:104:19
        at runMicrotasks (<anonymous>)
        at processTicksAndRejections (internal/process/task_queues.js:95:5)
        at D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:109216:20
        at D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:61151:11
        at D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:61017:18
        at context.callback (D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:60895:13)
        at D:\project\prr\ttt\node_modules\_postcss-loader@3.0.0@postcss-loader\src\index.js:208:9
        at runMicrotasks (<anonymous>)
        at processTicksAndRejections (internal/process/task_queues.js:95:5)
     @ ./node_modules/_@cainiaofe_cn-ui@0.7.16@@cainiaofe/cn-ui/es/components/cn-async-jobs-pro/index.js 4:0-22
     @ ./node_modules/_@cainiaofe_cn-ui@0.7.16@@cainiaofe/cn-ui/es/index.js
     @ ./src/Foo/index.tsx
     @ ./src/index.ts
     @ ./src/.umi-production/dumi/demos/index.ts
     @ ./src/.umi-production/dumi/layout.tsx
     @ ./src/.umi-production/core/routes.ts
     @ ./src/.umi-production/umi.ts
     @ multi ./src/.umi-production/umi.ts
null
 info  如果你需要进交流群，请访问 https://fb.umijs.org
build failed
Error: build failed
    at D:\project\prr\ttt\node_modules\_@umijs_bundler-webpack@3.5.34@@umijs\bundler-webpack\lib\index.js:177:29
    at finalCallback (D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:108196:12)
    at D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:108219:6
    at done (D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:67212:13)
    at runCompilers (D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:108123:48)
    at D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:108130:7
    at D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:108212:7
    at finalCallback (D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:98589:39)
    at D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:98605:13
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:147581:10), <anonymous>:51:1)
    at AsyncSeriesHook.lazyCompileHook (D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:147518:20)
    at onCompiled (D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:98603:21)
    at D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:99013:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:147581:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:147518:20)
    at D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:99010:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:147581:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:147518:20)
    at D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:97420:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:147581:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:147518:20)
    at D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:97411:32
    at eval (eval at create (D:\project\prr\ttt\node_modules\_@umijs_deps@3.5.34@@umijs\deps\compiled\webpack\4\bundle4.js:147581:10), <anonymous>:19:1)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
 info  如果你需要进交流群，请访问 https://fb.umijs.org
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ttt@1.0.0 docs:build: `dumi build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ttt@1.0.0 docs:build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2022-10-18T07_41_32_176Z-debug.log

本来我以为是没编译scss问题，然后实测发现scss可以编译能生效。最后使用chainWebpack不断调试发现postcss-loader的编译有点问题，去掉postcss-loader后打包就正常了。具体啥原因没仔细研究了。

Versions

PeachScript commented 1 year ago

安装 plugin-sass 插件试下：https://d.umijs.org/plugin#umijsplugin-sass

yehuozhili commented 1 year ago

这个当时怀疑sass编译时就安装了，事实上不是这个问题，因为装了也一样报错，而且我自己建立一个scss文件用些sass语法包括变量之类都是可以正常编译的，另外如果sass编不出来，那么至少在npm run start时候会报错或者样式不显示，但是start是正常的。我后来是去掉postcss-loader正常，怀疑postcss-loader生产环境某种语法加了啥东西就编不出来了

johnnychengchj123 commented 8 months ago

请问怎么关掉postcss-loader呀？同样的包，同样的报错。。。。

这个当时怀疑sass编译时就安装了，事实上不是这个问题，因为装了也一样报错，而且我自己建立一个scss文件用些sass语法包括变量之类都是可以正常编译的，另外如果sass编不出来，那么至少在npm run start时候会报错或者样式不显示，但是start是正常的。我后来是去掉postcss-loader正常，怀疑postcss-loader生产环境某种语法加了啥东西就编不出来了