在 SCSS 中使用 Tailwind 任意值支持

如何解决在 SCSS 中使用 Tailwind 任意值支持

如何在 Next.js 中将新的 TailwindCSS Arbitrary Value Support 与 SCSS 模块一起使用？

以下代码的 CSS 版本运行良好，但 SCSS 版本抛出错误：

// styles/foo.module.scss

.foo {
  @apply text-[#0e407c];
}

// pages/index.js

import styles from '../styles/foo.module.scss';
const IndexPage = () => <div className={styles.foo}>Hello World</div>;
export default IndexPage;

错误日志：

D:\foobar on main ≡ via  14.17.1
➜ rm -r .next; yarn build
yarn run v1.22.5
$ next build
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types
warn  - No ESLint configuration detected. Run next lint to begin setup

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver,may introduce breaking changes,and can change at any time.
info  - Creating an optimized production build
Failed to compile.

./styles/foo.module.scss.webpack[javascript/auto]!=!./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[3].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[3].use[2]!./node_modules/next/dist/compiled/resolve-url-loader/index.js??ruleSet[1].rules[2].oneOf[3].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[2].oneOf[3].use[4]!./styles/foo.module.scss
Error: resolve-url-loader: CSS error
  Invalid mapping: {"generated":{"line":1,"column":25},"source":"file://D:\\foobar\\styles\\foo.module.scss","original":{"column":null},"name":null}


> Build error occurred
Error: > Build Failed because of webpack errors
    at D:\foobar\node_modules\next\dist\build\index.js:15:924
    at async Span.traceAsyncFn (D:\foobar\node_modules\next\dist\telemetry\trace\trace.js:6:584)
error Command Failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

该错误仅发生在生产版本上。

完整的回购：https://github.com/brc-dd/nextjs-tailwindcss-bug

附加上下文

版本详情：

    "next": "11.0.1","autoprefixer": "10.3.1","postcss": "8.3.6","postcss-flexbugs-fixes": "5.0.2","postcss-preset-env": "6.7.0","sass": "1.36.0","tailwindcss": "2.2.4"

Node.js：14.7.1
操作系统：Windows 11 (22000.100)

// postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},'postcss-flexbugs-fixes': {},'postcss-preset-env': {
      autoprefixer: { flexBox: 'no-2009' },features: { 'custom-properties': false },stage: 3,},};

// tailwind.config.js

module.exports = {
  mode: 'jit',purge: ['./pages/**/*.js']
};

PS：“任意值类”与here中提到的“任意 CSS 类”不同。前者是 JIT 核心的一部分，因此可以直接应用，无需任何插件或在 @layer 指令下定义。

解决方法

似乎为 sourceMap 设置 false 选项为 resolve-url-loader 可以完成这项工作。此外，根据 comments in the code，这样做应该是安全的。

这是用于覆盖配置的 next.config.js：

module.exports = {
  webpack(config) {
    const rules = config.module.rules
      .find((rule) => typeof rule.oneOf === 'object')
      .oneOf.filter((rule) => Array.isArray(rule.use));

    rules.forEach((rule) => {
      rule.use.forEach((moduleLoader) => {
        if (moduleLoader.loader.includes('resolve-url-loader'))
          moduleLoader.options.sourceMap = false;
      });
    });

    return config;
  },};