cannot enable css module and vanilla css at the same time

[1846689910]

Hi next.js team,

I have a project built from next.js and I want to use both global stylesheet and local module stylesheet (including css, less, scss and stylus). I found that I can either use cssModules or without css modules not both.
project url https://github.com/1846689910/type-18-next/tree/e-dev on e-dev branch
the deploy on this branch https://type-18-next-71uzw4wum.vercel.app/

my next.config.js:

const { compose } = require("redux");
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true"
});
const withCss = require("@zeit/next-css");
const withSass = require("@zeit/next-sass");
const withLess = require("@zeit/next-less");
const withStylus = require("@zeit/next-stylus");

const enableShortHash = true;

module.exports = compose(
  withCss,
  withSass,
  withLess,
  withStylus,
  withBundleAnalyzer
)({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: `${
      enableShortHash ? "" : "[name]__[local]___"
    }[hash:base64:5]`
  },
  webpack: config => config,
  exportPathMap: async () => {
    return {
      "/": { page: "/" },
      "/demo1": { page: "/demo1" },
      "/demo2/[counter]": { page: "/demo2/[counter]" },
      "/folders/[folderId]": { page: "/folders/[folderId]" },
      "/folders/[folderId]/files/[fileId]": {
        page: "/folders/[folderId]/files/[fileId]"
      }
    };
  },
});

I have import vanilla stylesheets in src/pages/_app.jsx:

import "../client/styles/App.css";
import "../client/styles/App.scss";
import "../client/styles/App.less";
import "../client/styles/App.styl";

and import module stylesheet in src/client/js/components/Home/ModuledStyleDemo.jsx:

import css1 from "../../../styles/moduled/App.module.css";
import less1 from "../../../styles/moduled/App.module.less";
import scss1 from "../../../styles/moduled/App.module.scss";
import stylus1 from "../../../styles/moduled/App.module.styl";
... ...
<Grid container justify="space-evenly">
      <CenteredGrid item {...itemProps}>
        <strong className={css1.css}>CSS Module</strong>
        {" + "}
        <strong className="css">CSS</strong>
      </CenteredGrid>
      <CenteredGrid item {...itemProps}>
        <strong className={scss1.scss}>CSS Module</strong>
        {" + "}
        <strong className="scss">SCSS</strong>
      </CenteredGrid>
      <CenteredGrid item {...itemProps}>
        <strong className={less1.less}>CSS Module</strong>
        {" + "}
        <strong className="less">LESS</strong>
      </CenteredGrid>
      <CenteredGrid item {...itemProps}>
        <strong className={stylus1.stylus}>CSS Module</strong>
        {" + "}
        <strong className="stylus">STYLUS</strong>
      </CenteredGrid>
</Grid>

but I can only have moduled stylesheet work, but global css not working

I expect all the letters have color

it seems the cssModules:true in next.config.js will transpile all the css no matter .css and .module.css. Is there any way I can setup which stylesheet name convention should be moduled and which should not use css modules?

Would you please give me some idea on my issue to make both module stylesheet and vanilla stylesheet work?

[jamesmosier]

By using @zeit/next-css, @zeit/next-sass or @zeit/next-less you opt out of Next's built in CSS support for both global and module support. Next has built in support for both CSS and SASS.

If you remove those plugins you should be able to import global CSS inside pages/_app.js and then use *.module.css (or .scss) in any page or component.

@zeit/next-css and @zeit/next-sass are not recommended anymore. It is best to use Next's built in support and gain all the advantages of the work the team has put into optimizing the developer and end-user experience.

[1846689910]

Thank you for your reply. I confirm that if there are only .css and .scss and I can remove the @zeit/next-X plugin to make the expected stylesheet work.
But what about the LESS and STYLUS?
If I want to use them, I have to use @zeit/next-less and @zeit/next-stylus as mentioned here in the doc. So for this two stylesheet format, I can only choose either cssModules:true or cssModules:false.

Is there any way to make LESS and STYLUS global stylesheet and local module stylesheet work? like *.less, *.module.less, *.styl and *.module.styl

[jamesmosier]

I'm not familiar enough with the less & stylus plugins, but as you mentioned I think you must choose one or the other when using those plugins.

There is an old issue that discusses the use of global & modules together: vercel/next-plugins#403

[1846689910]

Hi I think I work out a solution to satisfy my demo use case:

• enable support for 4 stylesheet format (CSS, SASS/SCSS, LESS, STYLUS)
• import global stylesheet in _app.jsx (App.css, App.scss, App.less, App.styl)
• import local moduled stylesheet in react component (App.module.css, App.module.scss, App.module.less, App.module.styl)

My Solution is to still use the @zeit/next-X plugin, I found out if you mix use of LESS and CSS or STYLUS and CSS, you cannot just use @zeit/next-less in next.config.js, you have to install @zeit/next-css and use them together. Otherwise the syntax error will popup.

Then, to manipulate the getLocalIdent function to hash the localName by using loaderUtils.interpolateName if the loaderContext.resourcePath is with .module.xxx format

My change commit
and deploy

and I can see in the stylesheet that original className and transpiled className both exist.

[SolidZORO]

Yes, the official plugin has expired and is no longer applicable to the new version of Next. js.

You can try next-plugin-antd-less , support Next.js v9.5.