Ionic 3 - How to move the theme>variable.scss File

Question

This seems like an easy question, but I can't find the answer.

I have an Ionic 3 project created with ionic CLI so Angular/Webpack. I am trying to delete the theme folder and move the variable.scss file to my sharded scss folder. When I do it - everything blows up and I get an IDE error of "Sass Error File to import not found or unreadable: /Users/blah/src/theme/variables.scss. Parent style sheet: stdin"

Answer 1

If you move the variables.scss, you have to change the path. Ionic CLI put the path under "variableSassFiles" (in @ionic\app-scripts\config/sass.config.js).

So you have to customize the sass.config.js and put it in your own folder. Afterwards update the package.json and add:

  "config": {
    "ionic_sass": "./your-path-to-config-folder/sass.config.js"
  },

For more Information see https://github.com/ionic-team/ionic-app-scripts#custom-configuration