Stencil SASS loader not working as expected

[Tonyhliu]

Stencil version:

 @stencil/core@<version>

I'm submitting a:

[X] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:

When using SASS plugin for stencil compiler, I'm unable to import my scss files

Expected behavior:

Ability to use scss files from node modules

Related code:

Context : Within my node module, I have a folder that contains different scss files. For example, the node_module folder that includePaths is pointed at would be example_folder and that's the path that i get when i run require('my_node_module_folder').includePaths in my node REPL. And within example_folder I would havefile_A.scss and file_B.scss, and within my stencil component scss, i would do @import 'file_A.scss' but it fails by saying - 'File to import not found or unreadable.'

// current stencil.config.js
const sass = require('@stencil/sass');
exports.config = {
 ...,
 ...,
 plugins: [
    sass({
      includePaths: [require("[my_node_module_folder]").includePaths]
    })
  ]
}

// in sass 
@import 'file_A.scss'
// but build fails and errors out by saying 'File to import not found or unreadable.'

Note : This works in other web components that utilizes webpack.

Other information:

[adamdbradley]

What is the actual path being added? Can you test by writing it directly in the config? As far as includePath goes, the values are passed directly to node-sass.

[Tonyhliu]

The actual path (when I type in my require([path_to_node_module]) into node REPL) from includePath in stencil config is [ '/Users/tliu/dev/stencil-proj/node_modules/shared-styles/main' ]. But for some reason when I import the specific sass files in my main folder, it errors out.

It's weird because this works on my other webcomponent projects that utilize webpack...

[jgw96]

Hey @Tonyhliu , would you be able to put together a sample repo showing your setup exactly that we could use to reproduce this?

[Tonyhliu]

Of course - check out the repo here.

More specifically, look at https://github.com/Tonyhliu/stencil-datepicker/blob/master/stencil.config.js#L19 and it's being used in this scss file https://github.com/Tonyhliu/stencil-datepicker/blob/master/src/components/zap-datepicker/zap-datepicker.scss#L2. It currently breaks (with line 1 commented and line 2 uncommented) but it works when you uncomment line 1 and comment out line 2.

[bfmatei]

Hey @Tonyhliu !

I just cloned your repo but I am unable to install the dependencies since I don't have access to @zaplabs/zap-shared-styles

I will try with some other module.

[Tonyhliu]

I believe it has something to do with the includePaths in the stencil config, so try with another module but use includePaths @bfmatei

[bfmatei]

@Tonyhliu: can you please test two things?

1. Use plugin v0.0.3
2. Try includePaths: [...require("@zaplabs/zap-shared-styles").includePaths] since my guess is that includePaths is an array

[Tonyhliu]

No luck with either option :(

[Tonyhliu]

shoutout to @bfmatei for helping me out with this one!

[ofqwx]

Hi @Tonyhliu, I'm facing the same problem, my stencil.config.js sass plugin config looks like this:

plugins: [
    sass({
      includePaths: [
        require("@material/card").includePaths
      ]
    })
  ]

But it's giving me a "Cannot find module '@material/card'" in the require, how did make it work?

[Tonyhliu]

Can I take a look at your package.json? @ofqwx

[ofqwx]

Hi Tony, thank you for answer. Sorry for not update you, finally fixed restarting my computer and then the includePaths of the sass plugin works fine only adding "node_modules".

sass({
  includePaths: ["node_modules"]
})

On Fri, Jun 22, 2018 at 7:55 PM Tony Hoyin Liu notifications@github.com wrote:

Can I take a look at your package.json? @ofqwx https://github.com/ofqwx

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ionic-team/stencil/issues/569#issuecomment-399526196, or mute the thread https://github.com/notifications/unsubscribe-auth/AG4-GaX4w5DggaRRbLJwLxF55GPrx1_uks5t_S-mgaJpZM4SRmsw .

[Tonyhliu]

Interesting, so it only wanted the node modules folder and not the specific path to @material/card...

Regardless, glad you figured it out! @ofqwx

[ofqwx]

Yes, but keep in mind that I'm in the last version of stencil, this issue I think it was posted with a previous version, so maybe it just was fixed, any way it works.

Thank you very much for your time @Tonyhliu https://github.com/Tonyhliu.

On Mon, Jun 25, 2018 at 7:34 PM Tony Hoyin Liu notifications@github.com wrote:

Interesting, so it only wanted the node modules folder and not the specific path to @material/card...

Regardless, glad you figured it out! @ofqwx https://github.com/ofqwx

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ionic-team/stencil/issues/569#issuecomment-400033348, or mute the thread https://github.com/notifications/unsubscribe-auth/AG4-GcIiGesXHAeyQqXovGzyapTAzI6Rks5uAR8dgaJpZM4SRmsw .