How to use the new TailwindCSS Arbitrary Value Support with SCSS modules in Next.js?
The following code's CSS version was working well, but the SCSS version is throwing error:
// 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
"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
OS: 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. The former are part of the JIT core, hence can be directly applied without any plugin or defining under @layer
directive.
It appears that setting sourceMap
option to false
for resolve-url-loader
does the job. 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:
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;
},
};