cssnpmsassscss-lintnpm-scripts

node-sass script with multiple entry points


I have a project with a structure.scss as main entry point and then each platform a second entry point. Folder Structure:

scss/
|
|-- components/                 # Modular Component Files
|   |-- login.scss              # Structure file for Login Module
|
|-- platforms/
|   |-- globals/
|       |-- components/
|           |-- login.scss
|       |-- global-imports.scss
|       |-- base.scss
|   |-- platform1.scss          # Entrypoint for Platform 1
|   |-- platform2.scss          # Entrypoint for Platform 2
|   |-- platform3.scss          # Entrypoint for Platform 3
|
`-- structure.scss              # Primary Entrypoint for all Platforms

My Npm Scripts:

"scripts": {
    "platform": "node-sass --watch --recursive --output-style 'compressed' src/scss/platforms/ -o public_html/inc/assets/css/platforms",
    "structure": "node-sass --watch --recursive --output-style 'compressed' src/scss/style.scss public_html/inc/assets/css/style.css",
    "scss": "npm run platform & npm run structure"
},

I want that he watch ALL files and compile the files new after change on any file. He is creating at the moment with this Script the correct files... But the problem is, that he try to compile the file as entrypoint file on which one I make changes, that brings me a lot of console errors because he doesn't find any variables or any like that. And at last, I every time, need to make and useless change on the correct file, to get a correct working file...

Have anyone a fix for me for this problem?

And another problem is, that I can't overwrite default mixin vars in platforms > globals > components > login.scss from any platform.scss...


Solution

  • ok i got the solution! Just watch the whole scss folder with:

      "scripts": {
        "scss": "node-sass --watch --recursive --output-style 'compressed' src/scss/ -o public_html/css/"
      },
    

    And give all files that you dont want to use as entriepoint a underscore before the file name! Like _file.scss

    _files will be imported but ignored from the watcher.