When importing carbon style.scss my Compiling time increases drastically

[TThomm]

After making a small change to my scss files that import: : "@import 'carbon-components/scss/globals/scss/styles.scss';", it takes 40 seconds to recompile. When not imported, I do not have the styles but it compiles in a second. How do i reduce the compile time? I want to be able to use the carbon spacings in every scss file. Without these 40 second compile times.

Steps to reproduce the issue

I added the .env file according to the tutorial of Carbon but this does not seem to work.

[asudoh]

Hi 👋 just noticed this issue. Though this may not be the case for you, just sharing what I know. Here's a part of the discussion I had with the team of the PAL of a BU, back in February this year:

Got a report from @scottnath that Sass build in this repo got significantly slowed down with recent carbon-components release. Carbon team has found similar slowdown and did some optimization to our Sass dependency chain (#1709), but the most effective optimization was eliminating Sass custom importer (#1718).

node-sass is known of its significant slowdown when a custom importer is in use, which is discussed at issue# 307 as well as in issue# 296 in https://github.com/webpack-contrib/sass-loader repository, especially a comment in the latter dated at March 23th, 2017.

[CalebGM]

I've also been struggling with this. Want to use Carbon but also incorporate my own stylings. However, any change to a .scss file takes 50+ seconds to recompile because I import Carbon styles. Been looking around and don't have a solid direction of how to address this yet. Is there a way it doesn't have to recompile the Carbon .scss for changes to unrelated .scss files?

[joshblack]

Hi @CalebGM! 👋 There are a couple of options, most often this slowdown occurs for folks who use sass-loader along with Webpack. We have found success with an alternative called fast-sass-loader that helps to address some of the reasons why sass-loader takes along with Webpack.

In addition, you could optimize how you bring in Carbon so that you only load the components you need: https://github.com/carbon-design-system/carbon/blob/master/docs/guides/sass.md#optimizing-your-sass-builds

Finally, you could split out your sass imports so that you have one call in your JS to import vendor sass (carbon) and one that is your application level styling. Hope this helps!

[CalebGM]

Hi @joshblack thanks for getting back to me! Unfortunately I was using Create React App for my programs, and if I understood it correctly, I couldn't change the Webpack config to use fast-sass-loader unless I ejected.

However your final suggestion worked great for me! I separated the carbon imports into a different file from my application styles. Had some small issues with themes and order of imports, but trial and error was able to clear that up. My .scss file changes compile in under a second now

[joshblack]

Happy to hear that, @CalebGM! 🎉 Going to close this out, feel free to comment and I can re-open!!

[selimdoyranli]

+1

I decided scss theming & partial sass import for my project which using carbon/vue. Now very slow style compile - build time of project. I didn't have this problem when using the css approach.

styling part of my project:

{myProject}/../base/_carbon.scss

$feature-flags: (
  enable-css-custom-properties: true
);

// Your entrypoint for including sass files from Carbon
$css--font-face: true;
$css--helpers: true;
$css--body: true;
$css--use-layer: true;
$css--reset: true;
$css--default-type: true;
$css--plex: true;

$prefix: 'bx';

// Include defaults typically provided through the `styles.scss` entrypoint
@import 'carbon-components/scss/globals/scss/_css--reset.scss';
@import 'carbon-components/scss/globals/scss/_css--font-face.scss';
@import 'carbon-components/scss/globals/scss/_css--helpers.scss';
@import 'carbon-components/scss/globals/scss/_css--body.scss';

// Optionally include components that you need
@import 'carbon-components/scss/components/form/form';
@import 'carbon-components/scss/components/button/button';
@import 'carbon-components/scss/components/file-uploader/file-uploader';
@import 'carbon-components/scss/components/text-input/text-input';
@import 'carbon-components/scss/components/text-area/text-area';
@import 'carbon-components/scss/components/checkbox/checkbox';
@import 'carbon-components/scss/components/toggle/toggle';
@import 'carbon-components/scss/components/date-picker/date-picker';
@import 'carbon-components/scss/components/tag/tag';
@import 'carbon-components/scss/components/tile/tile';
@import 'carbon-components/scss/components/modal/modal';
@import 'carbon-components/scss/components/search/search';
@import 'carbon-components/scss/components/notification/inline-notification';
@import 'carbon-components/scss/components/dropdown/dropdown';
@import 'carbon-components/scss/components/inline-loading/inline-loading';
@import 'carbon-components/scss/components/tabs/tabs';
@import 'carbon-components/scss/components/content-switcher/content-switcher';
@import 'carbon-components/scss/components/tooltip/tooltip';

{myProject}/../base/_theme.scss

@use '@carbon/themes/scss/themes';
@use '@carbon/themes/scss/theme';
@use '@carbon/themes/scss/utilities';

/*
  * Override an existing token or add new token
*/

$custom-tokens: (
  body: (
    fallback: #f4f4f4,
    values: (
      (
        theme: themes.$g10,
        value: #f4f4f4
      ),
      (
        theme: themes.$g100,
        value: #222
      )
    )
  )
 ...
);

// Register custom tokens
$tokens: utilities.merge($custom-tokens);
@include theme.add-component-tokens($custom-tokens);

/*
  * Theme registrations
*/

// Default theme
:root {
  @include theme.theme(themes.$g10);
}

// Carbon gray 100
.theme-g100 {
  @include theme.theme(themes.$g100);
}

{myProject}/../app.scss

// Variables
@import '../css/variables/color.css';
@import '../css/variables/spacing.css';
@import '../css/variables/font-size.css';
@import '../css/variables/border-radius.css';
@import '../css/variables/box-shadow.css';
@import '../css/variables/z-index.css';
@import '../css/variables/motion.css';
@import '../css/variables/header.css';
@import '../css/variables/app-bar.css';
@import '../css/variables/sidebar.css';

// -- Overrides
@import 'overrides/input.scss';
@import 'overrides/textarea.scss';
@import 'overrides/button.scss';
// ---- Overrides Carbon
@import 'overrides/carbon/cv-tile';
@import 'overrides/carbon/cv-button';
@import 'overrides/carbon/cv-dropdown';
@import 'overrides/carbon/cv-text-area';
@import 'overrides/carbon/cv-inline-notification';
@import 'overrides/carbon/cv-modal';
@import 'overrides/carbon/cv-tooltip';

/*
 * Vendor
 */

/*
 ** > Bootstrap Vendor (@5.2.2)
 */

// > Bootstrap Partials

@import 'bootstrap/scss/maps';
@import 'bootstrap/scss/utilities';
@import 'bootstrap/scss/utilities/api';
@import 'bootstrap/scss/grid';
@import 'bootstrap/scss/containers';

// Base
@import 'base/carbon';
@import 'base/font';
@import 'base/general';
@import 'base/theme';

// Utils
@import 'utils/state';
@import 'utils/typography';
@import 'utils/color';

// Shared (elements with common/shared style classes)
@import 'shared/page';
@import 'shared/layout';
@import 'shared/transition';
@import 'shared/header';
@import 'shared/dropdown';
@import 'shared/app-md-content';
@import 'shared/form-view';
@import 'shared/app-toast';
@import 'shared/syntax';
@import 'shared/form';
@import 'shared/list';
@import 'shared/notification-card';

nuxt.config.js (nuxt ssr)

...

 /*
   ** Global Styles (Actual styles)
   */
  css: [
    // Actual styles entry point (as import management)
    '~/assets/style/scss/app.scss'
    // 3rds
    // ---
  ],
...

package.json

"dependencies": {
    "@carbon/themes": "^11.12.0",
    "@carbon/vue": "2.44.1",
    "bootstrap": "5.2.2",
    "cross-env": "^5.2.0",
    "express": "^4.17.1",
    "nuxt": "2.15.4",
    ...
  },
  "devDependencies": {
    ...
    "@nuxtjs/eslint-module": "^3.0.0",
    "@nuxtjs/style-resources": "^1.0.0",
    "@nuxtjs/stylelint-module": "^4.0.0",
    "@prettier/plugin-pug": "^1.15.3",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.10.0",
    "eslint-config-prettier": "^6.12.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-vue": "^7.1.0",
    "husky": "^4.2.5",
    "lint-staged": "^10.2.11",
    "node-sass": "^8.0.0",
    "nodemon": "^1.18.9",
    "nuxt-viewport": "^1.0.1",
    "postcss-color-mod-function": "^3.0.3",
    "postcss-import": "^14.1.0",
    "prettier": "^2.1.2",
    "pug": "^3.0.0",
    "pug-plain-loader": "^1.0.0",
    "sass": "^1.56.1",
    "sass-loader": "10.1.1",
    "stylelint": "^13.7.2",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-rational-order": "^0.1.2",
    "stylelint-config-standard": "^20.0.0",
    "stylelint-order": "^4.1.0",
    "stylelint-scss": "^3.18.0"
  }

Project start - build time minimum 2min. In addition, when changed codes in _theme.scss or _carbon.scss build stucks. I have to restart/re-build when it gets stuck.

after scss theming & partial import method:

√ Client
  Compiled successfully in 2.06m

√ Server
  Compiled successfully in 1.84m

no scss, css mode (carbon-components.min.css)

√ Client
  Compiled successfully in 36.08s

√ Server
  Compiled successfully in 34.86s

[lpkobamn]

I had the same problem with nextjs appdir, compilation in devmode took up to 5-6 seconds.
I renamed global.scss to global.css and used @import "@carbon/styles/css/styles.css"
The compilation speed became 500-600ms and all styles were preserved