CODEWITHSUNDEEP
typescriptsassnext.js
Safwen Daghsen
Safwen Daghsen

Reputation: 145

Integrating BEM Sass with Next and Typescript

I'm trying to refactor a static Sass Bem project into a Typescript NextJS app.

Loading the main.scss freezes the app

I used to generate a CSS file using node-sass but now I want to load every component with its corresponding styling.

When I load each single SCSS file in a component I get an error because my SCSS variables are externalized in the abstract folder.

My current Next Config is the following:

// next.config.js

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

 module.exports = withSass({
 sassLoaderOptions: {}
   });
```

My BEM folder structure:

SASS folder structure

My question is: Is there a way to integrate the BEM structure into the Next app or should I break the SCSS files into files that correspond with each component?

Also, I generate one CSS file will Next chunk it depending on the components that are being loaded or will it ship it all in the first load ?

Upvotes: 0

Views: 3144

Answers (2)

Safwen Daghsen
Safwen Daghsen

Reputation: 145

So after some digging it turned out that next-sass works just fine with no need for any external configurations.

Importing mains.scss in global layout was enough to make it work but one thing to notice is that in the main.scss I had to add the partials extensions.

So instead of @import "abstracts/functions"; I did @import "abstracts/functions.scss";

Upvotes: 1

Alezander Lesley
Alezander Lesley

Reputation: 368

1)Yes, you can do that. You accumulate all your styles inside main.scss by @import and import that inside "entrypoint" of your app. As I understood you did that as so, but got some freezing issues. Try this official example of integrating with sass. For your mixins & variables defined in BEM folders and imported in main.scss to be accessible through whole app you should try sass-resource-loader. You could try following config for it:

const withSass = require("@zeit/next-sass");
const resourcesLoader = {
    loader: "sass-resources-loader",
    options: {
        resources: [
            "./sass/_breakpoint.scss",
            "./sass/_mediaqueries.scss",
            "./sass/_variables.scss"
        ]
    }
};
module.exports = withSass({
    cssModules: true,
    cssLoaderOptions: {
        importLoaders: 1,
        localIdentName: "[name]__[local]___[hash:base64:5]"
    },
    webpack: (config, options) => {
        config.module.rules.map(rule => {
            if (
                rule.test.source.includes("scss") ||
                rule.test.source.includes("sass")
            ) {
                rule.use.push(resourcesLoader);
            }
        });
        return config;
    }
});

If it helps I've taken it from here. 2) I'm not sure about this, but as I understood Next.js ships both js and css only when needed, so if you import some separate stylesheet inside page, it will load this stylesheet only when you enter this specific page.

Upvotes: 1

Related Questions