Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ignore specific directory with sass themes #48

Open
Qvatra opened this issue Apr 23, 2019 · 3 comments
Open

Ignore specific directory with sass themes #48

Qvatra opened this issue Apr 23, 2019 · 3 comments
Labels
question Further information is requested

Comments

@Qvatra
Copy link

Qvatra commented Apr 23, 2019

My website suppose to support several brands so multiple themes is a necessity but building time because of that is enormous.
I assume it is because this module tries to access all scss files and resolve variables.

Is there a way to ignore specific directory that is inside my project and contain several bootstrap sass themes inside?

@manniL manniL added the question Further information is requested label Apr 23, 2019
@manniL
Copy link
Collaborator

manniL commented Apr 23, 2019

Please share more info, e.g. your config/setup.

@Qvatra
Copy link
Author

Qvatra commented Apr 24, 2019

@manniL , thx for reply.
my Nuxt config for styles is:

module.exports = {
  mode: 'universal',
  modules: [
     ['bootstrap-vue/nuxt', { css: false }],
     '@nuxtjs/style-resources'
  ],
  styleResources: {
      scss: [
         '@/assets/reconfiguredBootstrapVariables.scss',
         '@/node_modules/bootstrap/scss/bootstrap.scss'
      ]
  },
  css: `@/assets/shared.scss`,
  build: {
    cssSourceMap: false
  }
}

Build with above config worked but only until I tried to add bootstrap scss theme inside assets folder I bought the theme: https://github.com/creativetimofficial/ct-material-dashboard-pro
In few words there are enormous amount of scss files inside that theme. There is a gulpfile that goes with this theme and when I tried it it compiles in about 10 seconds to a css.

When I run npm run dev having this theme inside assets folder I see in console that Nuxt actually goes through all the theme files (here is why I have my assumption that Nuxt module tries to resolve all variables there using styleResources.scss config). Sometimes build even results in error: FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

My build process should be able to generate different brand styles and layouts using different bootstrap themes.
What I want is to try to improve build time by:

  1. ignoring scss themes that are not used for the current build but are located in the assets folder in the same repo.
  2. ignoring all scss in some *.vue files as I don't plan to write any styles in generic vue files (a lot of vue files have to be independent from brands style and layout)

@Qvatra
Copy link
Author

Qvatra commented Apr 29, 2019

it seems that there is a workaround that allows to 'ignore' scss themes if you want - placing them outside the assets folder. Did took me a while to came up with that solution.
Could be nice if this fact would be mentioned in documentation...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants