升级到顺风 v3 后 sass 失败

Posted 2023-03-06

技术标签:

【中文标题】升级到顺风 v3 后 sass 失败【英文标题】：sass fails after upgrading to tailwind v3 【发布时间】：2022-01-21 13:18:15 【问题描述】：

一个react app v17.0.2升级到TailwindCSS v3.0.5后，弹出如下sass错误：

ERROR in ./static/css/App.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Function rgb is missing argument $green.
        on line 392 of static/css/App.scss
>>   border-color: rgb(229 231 235 / var(--tw-border-opacity));

   ----------------^

    at processResult (C:\Users\Alexander\repos\StockApp\StockApp.Frontend\node_modules\webpack\lib\NormalModule.js:751:19)
    at C:\Users\Alexander\repos\StockApp\StockApp.Frontend\node_modules\webpack\lib\NormalModule.js:853:5
    at C:\Users\Alexander\repos\StockApp\StockApp.Frontend\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at C:\Users\Alexander\repos\StockApp\StockApp.Frontend\node_modules\loader-runner\lib\LoaderRunner.js:251:18
    at context.callback (C:\Users\Alexander\repos\StockApp\StockApp.Frontend\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at Object.callback (C:\Users\Alexander\repos\StockApp\StockApp.Frontend\node_modules\sass-loader\dist\index.js:54:7)
    at Object.done [as callback] (C:\Users\Alexander\repos\StockApp\StockApp.Frontend\node_modules\neo-async\async.js:8069:18)
    at options.error (C:\Users\Alexander\repos\StockApp\StockApp.Frontend\node_modules\node-sass\lib\index.js:293:32)
 @ ./src/index.js 5:0-30

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.61.0 compiled with 2 errors in 9248 ms

我正在使用 node-sass v7.0 和 sass-loader v12.4

有人在使用 sass 升级到 tailwindcss v3 后遇到同样的问题吗？

【问题讨论】：

安装 node-sass@4.14.1 可能会解决问题这意味着我也必须降级 nodejs，我想避免这种情况 【参考方案1】：

我正在使用 gulp，但在升级到 tailwind 3.0 时遇到了非常相似的错误。这对我有用：

更新了我的 sass 包（在我的例子中 gulp-sass 需要添加 sass 和 node-sass 包）对我的 gulp 文件进行小更新以获取最新的 gulp-sass

这为我解决了这个特定错误，希望对您有所帮助！

【讨论】：

【参考方案2】：

遇到了这个问题 - dev 中一切正常，然后 staging 无法预编译。

这个 (https://***.com/a/70665740) 解决方案对我有用。

我相信从您的 Gemfile 中删除 sassc-rails 也会解决问题，但我对如何处理 Sass 以及这是否适合您还不够熟悉。这对我来说没问题，但可能是 cssbundling/tailwind/postcss。