how to make multiple pages with sass?-CodePudding

I want to have 2 pages with their own style using sass. now I have a main.scss file and all styles will be compiled in style.css with this command in package.json "watch:sass": "node-sass sass/main.scss css/style.css", if I want to have another page I can still use this main.scss file but when I load this page all style of the first page will be come with style.css. may I have two separate main.scss file for each page? if yes how should I change "watch":sass "node-sass sass/main.scss css/style.css",

my second question is how can I use common styles like for header and footer which are in both pages?

UPDATE I created 2 main.scss file. and 2 separated style.css and put them beside each other . and I modified my watch script like this:

"watch:sass": "node-sass --watch sass/main.scss:css/style.css sass/main2.scss:css/style2.css"

my first main.scss and style.scss works but the second main.scss and style2.css does not work

CodePudding user response：

If you are not using a framework such as Angular, which allows you to have both global and local styling out of the box, you can simply create your own separate .scss file for each page, and import them into their respective .html files. You can then use the !important flag to override global styling.

You cannot simply import .scss into HTML files though, you would need to use something like LESS CSS. You can find more here [https://stackoverflow.com/questions/19215517/attaching-a-scss-to-html-docs]

For the common styles, you can simply use the global classes defined in main.scss.

Hope this helps.

CodePudding user response：

Yes, you can have separate main Sass files for each page. Instead of having a single main.scss file, you can create separate Sass files for each page and import them into a main Sass file that serves as the entry point for your Sass build process.

For example, let's say you have two pages, page1.html and page2.html, and you want to have separate Sass files for each page. You can create the following Sass files:

page1.scss page2.scss main.scss In the main.scss file, you can import the page1.scss and page2.scss files using the @import directive:

@import 'page1';
@import 'page2';

Then, you can update the "watch:sass" script in your package.json file to use the main.scss file as the entry point for your Sass build process:

"watch:sass": "node-sass sass/main.scss css/style.css"

This way, when you run the "watch:sass" script, the main.scss file will be compiled and all the styles from the page1.scss and page2.scss files will be included in the resulting style.css file.

To use common styles for the header and footer that are shared between pages, you can create a separate Sass file for the common styles and import it into both page1.scss and page2.scss. For example, you can create a _common.scss file with the styles for the header and footer, and then import it into page1.scss and page2.scss:

// common.scss

CodePudding user response：

I created another main.scss file called it main2.scss . I modified the watch script like this :

 "watch:sass": "sass --watch sass/main2.scss:css/style2.css sass/main.scss:css/style.css",

now Ican use style2.css for page 2 and in this way for page 2 I will load only relevant css style for only page 2.

Dont forget to stop npm start and re run it again

I read somewhere that its good to have only one css for all pages in sake of browser cache and etc... but in this way I have separated css for each page. Please comment your opinion about it.