2

如何在 Next.js 中将新的TailwindCSS 任意值支持与 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 类”不同。前者是 JIT 核心的一部分，因此无需任何插件或在指令下定义即可直接应用。@layer

4

2 回答 2

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 中的错误引起的。

于 2021-08-27T21:25:39.070 回答
1

似乎将sourceMap选项设置为falseforresolve-url-loader可以完成这项工作。另外，根据代码中的注释，这样做应该是安全的。

这是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;
  },
};
于 2021-07-29T07:44:41.740 回答