How to ignore compile child _xxx.scss files

[AlexStack]

How to ignore compile child _xxx.scss files?

e.g. main.scss

@import "theme_green"; @import "theme_light";

when editing _theme_green.scss file should ignore auto compile. Does anyone know how to do that?

Regards

[Wscats]

How to ignore compile child _xxx.scss files?

e.g.

main.scss @import "theme_green"; @import "theme_light";

when editing _theme_green.scss file should ignore auto compile. Does anyone know how to do that?

Regards

// main.scss
// @import "theme_green";
// @import "theme_light";

It should not compile if commented out here.

[AlexStack]

Hi Wscats:

Sorry I didn't make it clear. I need these imports for children scss files, e.g. _theme_green.scss

and I want main.scss automatically compile when I edit and save the child scss _theme_green.scss,

but I don't want the child scss file _theme_green.scss automatically compile because it only works inside the main.scss.

Regards, Alex

[Wscats]

Hi Wscats:

Sorry I didn't make it clear. I need these imports for children scss files, e.g. _theme_green.scss

and I want main.scss automatically compile when I edit and save the child scss _theme_green.scss,

but I don't want the child scss file _theme_green.scss automatically compile because it only works inside the main.scss.

Regards, Alex

This approach may require the subsequent addition of an ignore configuration item to go. Sorry, no way to achieve at this stage☹️

[rokerbp]

You can add your _xxx.scss files in a "components" folder and exclude it on settings.json file:

"compile-hero.ignore": "/components",

could work.

[MaverickMartyn]

I would like this feature as well. I am running into the exact same issue as OP. The extension is practically useless in larger projects due to this, as this way of organizing scss files is extremely common.

@rokerbp Your suggestion unfortunately doesn't work. First off, that configuration option accepts an array of paths, not just one (like this: "compile-hero.ignore": ["**/partials/**/*.scss"]). Even then, it doesn't work like that. According to the description in the settings, it's meant to ignore formatting only. Description:

Compile-hero: Ignore
List of paths to ignore when using VS Code format command, including format on save. Uses glob pattern matching.

@Wscats I hope you will reconsider, as this is quite a huge, and important, feature to choose not to support. To me, it means that I'll be looking elsewhere for an extension to compile SCSS.

[Wscats]

I would like this feature as well. I am running into the exact same issue as OP. The extension is practically useless in larger projects due to this, as this way of organizing scss files is extremely common.

@rokerbp Your suggestion unfortunately doesn't work. First off, that configuration option accepts an array of paths, not just one (like this: "compile-hero.ignore": ["**/partials/**/*.scss"]). Even then, it doesn't work like that. According to the description in the settings, it's meant to ignore formatting only. Description:

Compile-hero: Ignore
List of paths to ignore when using VS Code format command, including format on save. Uses glob pattern matching.

@Wscats I hope you will reconsider, as this is quite a huge, and important, feature to choose not to support. To me, it means that I'll be looking elsewhere for an extension to compile SCSS.

This is indeed a very important feature, I will consider implementing it in subsequent versions, thank you for your support.

[Wscats]

The new version already supports this feature.

{
  "compile-hero": {
    "ignore": ["src/test.js", "*/test.scss", "**/spec/*", "**/src/**/*"],
  }
}

[izznogooood]

Is it me or should not a scss compiler ignore partials by default ? (just compile main files) ?

I would like it to work like: If i edit a partial, all the main files that includes it should compile, and not a a direct compile of the partial ? I love this extension but the CSS folder fills up with unused partials.

I could have a look at that if "we" agree.

[Wscats]

Is it me or should not a scss compiler ignore partials by default ? (just compile main files) ?

I would like it to work like: If i edit a partial, all the main files that includes it should compile, and not a a direct compile of the partial ? I love this extension but the CSS folder fills up with unused partials.

I could have a look at that if "we" agree.

Sorry, this is not supported for the time being, because it is a troublesome thing to monitor the sub-file changes under the main file. Maybe other non-scss files also introduce this sub-file, which will cause many other files to be forced to compile. I consider adding a configuration item watch attribute in subsequent versions to see if it can be solved similarly.

{
  "compile-hero": {
    "watch": ["src/test.js", "*/test.scss", "**/spec/*", "**/src/**/*"],
  }
}

[mmolassi]

Ok, good to know! I will be waiting this feature too!

[izznogooood]

Is it me or should not a scss compiler ignore partials by default ? (just compile main files) ? I would like it to work like: If i edit a partial, all the main files that includes it should compile, and not a a direct compile of the partial ? I love this extension but the CSS folder fills up with unused partials. I could have a look at that if "we" agree.

Sorry, this is not supported for the time being, because it is a troublesome thing to monitor the sub-file changes under the main file. Maybe other non-scss files also introduce this sub-file, which will cause many other files to be forced to compile. I consider adding a configuration item watch attribute in subsequent versions to see if it can be solved similarly.

{
  "compile-hero": {
    "watch": ["src/test.js", "*/test.scss", "**/spec/*", "**/src/**/*"],
  }
}

Not a bad idea ;)

[richdenis86]

Is it me or should not a scss compiler ignore partials by default ? (just compile main files) ? I would like it to work like: If i edit a partial, all the main files that includes it should compile, and not a a direct compile of the partial ? I love this extension but the CSS folder fills up with unused partials. I could have a look at that if "we" agree.

Sorry, this is not supported for the time being, because it is a troublesome thing to monitor the sub-file changes under the main file. Maybe other non-scss files also introduce this sub-file, which will cause many other files to be forced to compile. I consider adding a configuration item watch attribute in subsequent versions to see if it can be solved similarly.

{
  "compile-hero": {
    "watch": ["src/test.js", "*/test.scss", "**/spec/*", "**/src/**/*"],
  }
}

Perfect Idea!

[Wscats]

{
  "compile-hero": {
    "watch": ["src/test.js", "*/test.scss", "**/spec/*", "**/src/**/*"],
  }
}

I have added this feature. You can use watch to monitor partial files to see if it can help you solve the current problem. If it can help you, you can give me a five-star praise, thank you very much.

[szegheo]

@Wscats sorry, but it's still not clear how to achieve this simple thing (tried all the suggested settings above):

• Watch every scss file for changes
• Do not compile partials as standalone .css files when they change, but trigger compile other scss files

src/sass/partials/_header.scss:

// just for example
.site-header {
  background-color: black;
}

src/sass/style.scss:

// no other code in this file just importing the partials
@import 'partials/header';
@import 'partials/layout';
@import 'partials/modal';
@import 'partials/gallery';
// ...and more

.vscode/settings.json:

{
  "compile-hero": {
    "scss-output-directory": "../../",
    "ignore": ["**/sass/partials/**/*"],
    "watch": ["**/sass/**/*"]
  }
}

Using the above (suggested) config works only when editing style.scss. If option ignore is omitted, partials are compiled into standalone files.

The simple goal is to compile ONLY style.css when WHATEVER scss file got modified.

This is how it works by default with Webpack and sass, but this plugin would be great to avoid that ~300MB node_modules folder for simple projects...

[richdenis86]

@Wscats sorry, but it's still not clear how to achieve this simple thing (tried all the suggested settings above):

• Watch every scss file for changes
• Do not compile partials as standalone .css files when they change, but trigger compile other scss files

src/sass/partials/_header.scss:

// just for example
.site-header {
  background-color: black;
}

src/sass/style.scss:

// no other code in this file just importing the partials
@import 'partials/header';
@import 'partials/layout';
@import 'partials/modal';
@import 'partials/gallery';
// ...and more

.vscode/settings.json:

{
  "compile-hero": {
    "scss-output-directory": "../../",
    "ignore": ["**/sass/partials/**/*"],
    "watch": ["**/sass/**/*"]
  }
}

Using the above (suggested) config works only when editing style.scss. If option ignore is omitted, partials are compiled into standalone files.

The simple goal is to compile ONLY style.css when WHATEVER scss file got modified.

This is how it works by default with Webpack and sass, but this plugin would be great to avoid that ~300MB node_modules folder for simple projects...

### try this in settings.json

"compile-hero.ignore": ["scss/*"], "compile-hero.watch": ["style.scss"], "compile-hero.scss-output-directory": "./", "compile-hero.generate-minified-css": true, "compile-hero.typescriptx-output-toggle": false, "compile-hero.disable-compile-files-on-did-save-code": false,

[szegheo]

@richdenis86 thanks, but it won't work with any config (including the one you sent). Currently, watching is needed for all scss files to catch modification and trigger the plugin. Option ignore is needed to not compile the partials. These two knock each other out.

• If the file is not watched, the plugin won't do anything when that file is edited.
• If the file is in the ignore list, the plugin won't do anything when that file is edited.

As I see, in current version the plugin can't handle the situation (fix me if I'm wrong).

The easiest solution would be a new option something like this:

  "compile-hero.compile-instead": {
    "**/sass/partials/*": "../style.scss"
  },

...so when the currently edited file matches the glob pattern, then instead compile the other file we want. But I'm just wondering, there would be better way to solve this I'm sure.

[NikolasP98]

Same issue here, I only need to compile my main.scss file; no need to do so for the subsequent _partial.scss files, since everything will be compiled into a single main.css file anyway. Any other complilations would be redundant and virtually useless to my project. There should at least be an option to disable _partials.scss from being compiles (it shouldn't be enabled by default anyway, but y'know, customizability.)

[davedavee]

Same here. Need to update a whole folder of *.pug files when I edit any partial file (but not partials). Basically whenever I change any file in "components", "includes", "sections", etc. folder, I need to compile all files in "pages" folder. Currently I am not able to achieve this.

*edit:

site/ -- index.html -- about.html -- *.html source/ -- components/ --- _partial1.pug --- _partial2.pug -- include/ --- _partial3.pug -- sections/ --- _partial4.pug -- pages/ --- index.pug --- about.pug --- *.pug

[robertosw]

watch doesnt work properly and reliably with less. Having a variables.less with just variables worked (while not using watch) if you saved every file manually that imported variables.less Using watch produces something completely unreliable. Sometimes those values are imported, sometimes not. But you cant force it anymore by saving every file manually.