Skip to content
This repository has been archived by the owner on Jul 6, 2021. It is now read-only.

[next-sass] CSS modules are not included in main CSS bundle while using dynamic import #192

Closed
ba1uev opened this issue Jun 4, 2018 · 2 comments · Fixed by #228
Closed

[next-sass] CSS modules are not included in main CSS bundle while using dynamic import #192

ba1uev opened this issue Jun 4, 2018 · 2 comments · Fixed by #228

Comments

@ba1uev
Copy link

ba1uev commented Jun 4, 2018

I created simple next app which detects type of user devise (in each file in 'pages' directory) and returns a specific component depending on it. This app uses CSS-mudules provided by @zeit/next-sass plugin. It also uses dynamic import to implement javascript bundle splitting for desktop and mobile versions of app.

But styles of these two component trees (Desktop & Mobile) are not included in the main css bundle when I use dynamic import instead of normal

How can I fix it? May be it's not the best way to split desktop and mobile bundles of next-based app?

// next.config.js

const withSass = require('@zeit/next-sass');

module.exports = withSass({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: "[path]__[local]",
  }
});
// pages/index.js

import dynamic from 'next/dynamic';
const Mobile = dynamic(import('components/Mobile'));
const Desktop = dynamic(import('components/Desktop'));

class Index extends Component {

  static async getInitialProps({ req }) {
    return { userAgent: req ? req.headers['user-agent'] : navigator.userAgent };
  }

  render() {
    return (
      <div>
        <Head>
          <link rel="stylesheet" href="/_next/static/style.css" />
        </Head>
        {isMobile(this.props.userAgent) ? (
          <Mobile/>
        ) : (
          <Desktop/>
        )}
      </div>
    );
  }
};
@timneutkens timneutkens mentioned this issue Jul 29, 2018
Merged
@willin
Copy link

willin commented Aug 23, 2018

@timneutkens how to config?

same issue occured

@timneutkens
Copy link
Member

It's fixed in next@canary + @zeit/next-css@canary.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Implement mini-css-extract-plugin timneutkens/next-plugins
3 participants
@willin @timneutkens @ba1uev