I have no prior experience of scss and I am using a Portfolio Template for my portfolio website.
I added one more section to the website. If I am defining a style in any _file.scss file which was present priorly, it is working fine but when I create a new _filename.scss file for it. It is not detecting the style from that file.
Do I need to configure something before running npm start or npm install.
I think you have to Import the file in your main scss file.
ex.:
given:
_filename.scss
usage in the main scss file:
#import "filename";
Remember***
Dont write the underscore in there, the underscore means, that it is a (scss) file that is going to be imported.
Related
Im trying to learn sass and JavaScript using VS Code. I created an app folder that holds my js folder which contains my script.js and scss folder that contains my _globals.scss. _header.scss, _variables.scss, and style.scss. I created a dist folder that contains my style.css and style.css.map. I have my html linked to my dist/style.css but I cannot get any of my pages to connect to my html page. I have the #import variables, globals, and header set in my style.scss page but the only styles I can add to my webpage is from the html document itself.
I’ve tried very little because I’m new to web development. Working from a MacBook, I downloaded homebrew, git, and a couple other apps I saw on YouTube. I tried changing my #imports to #use and adding them directly to the style.css but that did not help.
I was expecting by downloading any of those files would get my pages to communicate with each other.
Are you trying to import the .scss files on your styles.css? If so, this is not the right way to work with sass.
To be able to "transform" the .scss files into .css, you have to compile these files using the CLI (command-line/terminal).
This video shows how to do this procedure.
It the above is not the case, could you please send us screenshots of what you're trying to do, it will be really helpful to help you to fix this issue.
Create a new file in CSS(type),
then link that file using the <link> tag in your HTML page using the address of the newly created .css file.
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
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.
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
.
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.
Hello hope you are well!
I am working on project when Frontend is in HTML, CSS, SASS, JavaScript, for backend I am using PHP Laravel framework.
My goal is to compile file sass into file CSS, for this reason I have followed their steps:
1.In folder resources, I created folder sass, into it, I created file app.sass
2. In folder public, I created folder CSS and into it, I created file app.css
In file webpack.mix.js I have written a method like below:
mix.js("resources/js/app.js", "public/js")
.sass("resources/sass/app.scss","public/css"
);
when first rules is for source "resources/sass/app.scss" and second rule is destination "public/css".
After that In file index.html I written this rule by document:
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
when I run : npm run dev/ npm run watch
sass compile into css as you can see, but in browser doesn't seen any style second images is the case in the web: I want to display styles on the web after compile it does any idea or maybe exist any another rules that I don't know yet?
Thanks.
enter image description here
enter image description here
I have used one component file called xyx.js and I imported my scss file properly './xyz.scss' both are in the same folder. When I see the styles from the chrome scss extension it works however when I tried to see it from my scss file it's not working.Can anyone help me to get through this?
your global SASS file should be imported inside the index.js file or else it won't work, and you may have to change the global CSS file into SASS and same import the in-app component.
I have a application which uses app.css in index.html. This app.css is the output css file from multiple SCSS files.
While inspecting an element to find css of that element, how can I know from which SCSS file is that style from?
You can use SASS Source Mapping. This will let you display the exact .scss file in your browser inspector.
Adding a flag to Sass's command line tool:
$ sass sass/screen.scss:stylesheets/screen.css --sourcemap
If you look in your output folder after running that command, you'll notice that a comment has been added to the end of the generated CSS file:
/*# sourceMappingURL=screen.css.map */
Hope this helps!
As you've shown no code, i'll assume... you're using compass to compile? In this case you can use the ruby to sourcemap your files for you.
This can be done like so:
# Enable CSS source maps for development
sourcemap = true
This can be added to your rubyfile.
If you're using gulp or grunt you can use:
https://www.npmjs.com/package/grunt-concat-sourcemap
or
https://www.npmjs.com/package/gulp-concat-sourcemap
or if you're using sass:
http://thesassway.com/intermediate/using-source-maps-with-sass