通过 SCSS 使用 Tailwind 任意值支持

Question

如何在 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：“arbitrary-valued classes”与here 提到的“arbitrary CSS classes”不同。前者是JIT核心的一部分，因此可以直接应用，无需任何插件或在@layer指令下定义。

Answer 1

似乎将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;
  },
};

Answer 2

如果您使用 JIT 编译，请确保不要将具有自定义值 opacity-[0.87] 的类放在 @apply 的末尾。

❌ This will not work
.class {
  @apply text-black text-opacity-[0.87];
}
✅ This will work
.class {
  @apply text-opacity-[0.87] text-black;
}

---

这是由 resolve-url-loader v2 和 v3 中的错误引起的。