Custom sass.config.js not using includePaths

[leifwells]

Note: for support questions, please use one of these channels:

https://forum.ionicframework.com/
http://ionicworldwide.herokuapp.com/

Short description of the problem:

I needed to add some Sass files into the build that the build process wasn't finding, so I decided to copy the sass.config.js file into my project (like it appears in the ReadMe) and add a path to the includePaths node.

I've attempted these paths (the last two are the path not being found):

includePaths: [
    'node_modules/ionic-angular/themes',
    'node_modules/ionicons/dist/scss',
    'node_modules/ionic-angular/fonts',
    'src/theme/overrides',
    '{{SRC}}/theme/overrides'
  ],

While I can tell that the sass.config.js is being used (by changing the outputFilename), the Sass files in the src/theme/overrides folder aren't getting compiled into the main.css file.

What behavior are you expecting?

I expect the CSS in the Sass files found in the includedPaths node to be inside my main.css file.

Steps to reproduce:

1. Copy and modify a sass.config.js file into your project
2. Place custom Sass file into custom folder (any folder not already being compiled)
3. Add the config file into the package.json file as indicated in the ReadMe file.
4. Run npm run build
5. Check for your css in the main.css file.

insert any relevant code between the above and below backticks

Which @ionic/app-scripts version are you using?
0.0.47

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

> ionic-app-scripts build -s ./config/sass.config.js

[22:38:11]  ionic-app-scripts 0.0.47
[22:38:11]  build dev started ...
[22:38:11]  clean started ...
[22:38:11]  clean finished in 8 ms
[22:38:11]  copy started ...
[22:38:11]  transpile started ...
[22:38:16]  transpile finished in 4.34 s
[22:38:16]  webpack started ...
[22:38:16]  copy finished in 4.51 s
[22:38:30]  webpack finished in 14.13 s
[22:38:30]  sass started ...
[22:38:31]  sass finished in 1.17 s
[22:38:31]  build dev finished in 19.68 s

[danbucholtz]

Is this still an issue? Please let me know if it is.

Thanks,
Dan

[edwardpayton]

Aplogies for commenting ona closed issue, but was there ever a solution to this?

I have exactly the same issue - trying to add a 3rd party plugin styles into my Sass build (just Bootstrap for testing purposes).

I've created a config file at custom-config/sass.config.js

  includePaths: [
    // 
    'node_modules/bootstrap/dist/css/bootstrap.min.css' 
  ],

and then run npm run build --sass ./custom-config/sass.config.js

What am I doing wrong?

[sbatezat]

@danbucholtz More than one year later, I can confirm it's still an issue.

Even if you fix the issue, may I have your attention on the following related issue?

I'm creating a 3rd party library for Ionic, and it seems to be the only way to have style included to the projet using it. As per documentation (https://ionicframework.com/docs/developer-resources/third-party-libs/):

With most libraries, everything “just works” out of the box. In some rare cases, the build process might need changes made to build.

I totally disagree. From what I can see, every library with style will not work without changing the build process. On a regular Angular project, there is no issue with that because we can convert styleUrls to inline styles thus CSS is part of the component.

Am I doing something wrong or is there a huge issue?

EDIT 02/02/2018: OK - my bad. There is no defect. We need to manually import the scss file (@edwardpayton in your case, @import 'boostrap.min') after editing the sass.config.js file. BUT, my above remarks are still valid. Including a library is too complex using Ionic.

[rodpatulski]

This is definitely still an issue. includePaths seems to be completely ignored.

As of @ionic/app-scripts : 3.2.0, it seems you'll still need to @include FILE; somewhere See this closed issue on app script's github

I found that as of 'Ionic Framework : ionic-angular 3.9.2' you have two choices insert your import in src/theme/variables.scss or src/app/app.scss.

For example in variables.scss

/* some declarations here */
@import 'insrctest';/*file sits in src/test/insrctest.scss*/
And in my custom.config.js

includePaths: [
'node_modules/ionic-angular/themes',
'node_modules/ionicons/dist/scss',
'node_modules/ionic-angular/fonts',
'./src/test', /* when the import above gets called, node-sass will look in here */

@danbucholtz Is there a way to only specify an include path and have app scripts look for any .scss files regardless of whether there is an '@import' statement?

@edwardpayton or @leifwells did you ever find a suitable workaround?