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
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 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.
i am trying to generate metronic layout with layout builder, but when I try to open index.html I just see this:
screenshot
It seems to me like it can't see css styles
When I open just html demo, it works well.. I did by tutorial, I generated assets by gulp, so I don't know what to do now..
Btw. using Mac
Any help? Thanks!
You can get the generated assets folder from the downloaded zip file.
Copy from /html/demo1/dist/assets into exported layout builder folder.
You don't need to rebuild the assets using gulp if you don't modify any assets file from the src folder.
I am working on an Electron project and using Electron-packager to package my app.
However, with my current folder structure, all CSS files located in the parent folder of my Electron project/package.json are not being copied to the packaged application.
This is my structure:
- GUI
--- CSS
- Apps
---Demo
------package.json, etc
---Demo2
------package.json, etc
---Demo3
------package.json, etc
I build apps while inside Demox folder. Problem is I can't move GUI folder to inside Demo/Demo2/Demo3 since it will contain just the same files and it would be redundant.
However, electron-packager does not support packaging of files from outside the actual Demox folder.
It was suggested that I move these CSS files to node_modules instead.
But how do I require these CSS files from the node_modules folder to an html file? Is there any other way WITHOUT using webpack? I'm hoping to keep this simple and stay away from setting webpack up unless I have no other choice.
For reference, here is the question I posted on the Electron-packager github:
https://github.com/electron/electron-packager/issues/1089
Thanks!
Was able to come up with a solution now.
Since I have moved node_modules folder to the very root (C:\node_modules, so it can be used by all node projects residing in C: drive), I just used an absolute path and link from there:
<link rel="stylesheet" href="/node_modules/sample-css/button.css">
Works well for my needs.
Thanks everyone.
I am developing my own theme for wordpress, I'm also using SASS to write the CSS, and I want the final compiled CSS to be minified... my question is:
What would happen if I set SASS to compile the CSS in my style.css file (the one that is in the main folder of "themes"), would Wordpress be able to read it without problems?
Or should I leave style.css blank and compile the CSS in a file inside a CSS fodler, for example: css/main.css?
Or should I leave style.css blank and compile the CSS in a file inside
a CSS fodler, for example: css/main.css?
This is the best way to do it, and the way 99% of custom theme developers use. Just call main.css with #import and that's it
I would leave the style.css file alone and create another file like you stated. I'd also make sure to not include the default style.css and only the one you generated. If you look at great starter themes, that is what they do. For example, https://github.com/roots/roots.
I think it depends on how large your css file will be. For larger projects, I would split up my stylesheets into global.css, layout.css, mobile.css, tablet.css, put them in a subdirectory and #import them into the main style.css in the theme's root folder.
If it is a simple site that doesn't require structuring your css in such a way, you can have style.css and style.sass located in the same root folder of your theme.