[英]Using Tailwind Arbitrary Value Support with SCSS
How to use the new TailwindCSS Arbitrary Value Support with SCSS modules in Next.js?如何在 Next.js 中对 SCSS 模块使用新的TailwindCSS 任意值支持?
The following code's CSS version was working well, but the SCSS version is throwing error:以下代码的 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.
The error is occurring only on production builds.该错误仅发生在生产版本上。
Complete repo: https://github.com/brc-dd/nextjs-tailwindcss-bug完整回购: 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 Node.js:14.7.1
OS: Windows 11 (22000.100)操作系统: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 " are not same as " arbitrary CSS classes " mentioned here . PS:“任意值类”与此处提到的“任意 CSS 类”不同。 The former are part of the JIT core, hence can be directly applied without any plugin or defining under
@layer
directive.前者是 JIT 核心的一部分,因此可以直接应用,无需任何插件或在
@layer
指令下定义。
It appears that setting sourceMap
option to false
for resolve-url-loader
does the job.似乎将
resolve-url-loader
sourceMap
选项设置为false
可以完成这项工作。 Also, according to the comments in the code , it should be safe to do so.另外,根据代码中的注释,这样做应该是安全的。
Here is the next.config.js
to override the config:这是覆盖配置的
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;
},
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.