webpack - 将 Tailwind 任意值支持与 SCSS 结合使用

Question

如何使用新的TailwindCSS Arbitrary Value Support在 Next.js 中使用 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:“任意值类”与提到的“任意CSS类”不同here 。前者是 JIT 核心的一部分，因此可以直接应用，无需任何插件或在 @layer 指令下定义。

Answer 1

如果您使用 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 中的错误引起的。