Injected SASS files not modified the component style on change

[ghost]

This is config for stenctil sass

sass({
  injectGlobalPaths: [
    './src/scss/base/variables.scss',
    './src/scss/base/animations.scss',
    './src/scss/base/mixins.scss',
    './src/scss/base/settings.scss',
  ]
})

When I change my-component.scss, the style change properly. This is the result:

[46:45.9]  changed file: my-component.scss
[46:45.9]  rebuild, mycomponent, dev mode, started ...
[46:45.9]  generate styles started ...
[46:45.9]  generate styles finished in 62 ms
[46:45.9]  generate bundles started ...
[46:45.9]  generate bundles finished in 1 ms
[46:45.9]  updated style: my-component
[46:45.9]  updated stylesheet: my-component.css
[46:45.9]  rebuild finished, watching for changes... in 82 ms

But, when I modified the injected SASS files (i.e _variables.scss) , Its not render the component style. This is the result

[47:16.3]  changed file: _variables.scss
[47:16.3]  rebuild, mycomponent, dev mode, started ...
[47:16.3]  generate styles started ...
[47:16.3]  generate styles finished in 5 ms
[47:16.3]  generate bundles started ...
[47:16.3]  generate bundles finished in 1 ms
[47:16.3]  rebuild finished, watching for changes... in 17 ms

I want the component style render too when I change the Injected styles.

Current, I need to re run the npm start command to get affected style. Any fix for this?

[ghost]

This also happens if you change an imported sass or css file. The changed file is rebuilt, but the component which imports it is not :(

[chilipote]

Hi 👋
Do we have news about that one ?

It seems like . it's happening for @stencil/core v1.1.2 also.

Thanks you for your support.

[jcfranco]

We faced a similar issue and worked around it by referencing partials by their exact name. Could you try the following (code assumes they're all partials)?

sass({
  injectGlobalPaths: [
    './src/scss/base/_variables.scss',
    './src/scss/base/_animations.scss',
    './src/scss/base/_mixins.scss',
    './src/scss/base/_settings.scss',
  ]
})

[jmcmullen]

Still having this issue, even when referencing the partials by their full name.

    sass({
      injectGlobalPaths: [
        './src/assets/styles/_variables.scss',
        './src/assets/styles/_mixins.scss',
        './src/assets/styles/_typography.scss'
      ]
    })

[aharris]

Has there been any update on this or any workarounds?

[daure]

Is there an alternative plugin that doesn't have this issue?

[aharris]

My workaround, for now, was to use npm-watch and touch the main file whenever any global CSS (scss in my case) file changes.

stencil.config.ts:

globalStyle: 'src/styles.scss'

simplified package.json:

{
    "watch": {
        "update:styles": {
            "patterns": [
                "src/styles"
            ],
            "extensions": "scss",
            "quiet": false
        }
    },
    "scripts": {
        "update:styles": "touch src/styles.scss",
        "watch": "npm-watch"
    },
    "devDependencies": {
        "npm-watch": "0.6.0"
    }
}

So in this example when and .scss file is saved inside of src/styles the main globalStyle file is touched which forces a rebuild.

[splitinfinities]

This issue is something that exists in @ionic-team/stencil more than this sass plugin. Please go signal boost issues there like ionic-team/stencil#2635