Ok. So this is my first lLaravel project. And I got into an odd issue. I am trying to customize the authentication forms by using bootstrap and my own added SASS files (which then are converted into the main app.css). So here is what is the issue: in the app.scss file I have imported the SASS partials and other external resources:
// Fonts
#import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
// Variables
#import "variables";
// Bootstrap
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
// ADDED Login
#import "login";
In this form, when the app.scss file is translated into the app.css, I receive an error "File to import not found or unreadable: node_modules/bootstrap-sass/assets/stylesheets/bootstrap.
on line 6 of resources/assets/sass/app.scss". Anyone has any idea on how to fix this, suggestions on how to manage my css and sass files? Thank you in advance for your time.
I found a quick fix, but I am not sure that it is the best one. I downloaded a bootstrap.min.css and added it in public/css/ . Then, in the app.scss I imported the bootstrap file "#import "bootstrap.min.css";". That turned out to be a fix so far.
Simply just add a ~ to beginning of the imported directory
#import "~node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
it should be like above.
Related
In a NextJS project that uses TailwindCSS, I have a global css file, index.css and I'm trying to import another file.pcss into the global css file. But, NextJS can't seem to find file.pcss, produces the error below:
Error: Can't resolve 'file.pcss' in '/home/chris/repo/styles'
index.css has:
#import 'file.pcss';
Not sure why this is happening because Next + Tailwind should support PostCSS without issue.
Figured it out!
When I converted both files to .scss files. Everything started working again.
Result:
global css file renamed to: index.scss
#import 'file.scss';
pcss file renamed to: file.scss
Solution came from: https://github.com/vercel/next-plugins/issues/565#issuecomment-561086895
I am new to styling using app.scss for a new create-react-app and would like to know the following:
Should i store all the .scss and .css files in the style folder?
If I would like to import all of them into the app.scss, how do I
go about doing that?
I noticed that app.scss does these:
#import '~bootstrap/scss/bootstrap'
$fa-font-path: '~#fortawesome/fontawesome-free/webfonts'
When i tried to do this: #import './myStyles.css' it does not get picked up. I am not sure what is going on.
The reason i am adament about putting it in the app.scss file is becauase i created a toggle that allows me to switch between dark and light theme. However, I am unable to add customed theme to the existing themes.
Hope my question is clear
Here is reply for you query-
1.Should i store all the .scss and .css files in the style folder? - for this you have to make two folder, one is css and another sass(better approach)
2.If I would like to import all of them into the app.scss, how do I go about doing that?-
"#import 'reset';" no need of scss extension
If you are working on big project then i would suggest you that better follow this structure.
inside sass or scss folder make subfolder for diffrent works like vendor, module,particles etc. like modules/_colors.scss and follow below structure
// Modules and Variables
#import "partials/base";
#import "partials/buttons";
I hope this will help.
I'm working on a custom theme for my local WordPress site. I've set up a File Watcher in PhpStorm that compiles my scss files in myTheme/scss/ to myTheme/style.css.
This works as intended, the variables which I've declared in _variables.scss are able to be used in style.css or any file imported after it.
My problem now is that the #import '~foundation-sites/dist/css/foundation.min.css'; is being compiled as #import '~foundation-sites/dist/css/foundation.min.css'; instead of the actual css content.
I've tried using #import '../node_modules/foundation-sites/dist/css/foundation.min.css'; instead but this compiles the same way.
What am I doing wrong?
.css extension in import statement tells the compiler to generate plain CSS import instead of pulling the contents in; see https://github.com/sass/sass/issues/556#issuecomment-397771726 for reference.
I'd suggest changing your import to
#import '../node_modules/foundation-sites/dist/css/foundation' - this should help.
Note that ~ prefix is a webpack feature SASS compiler is not aware of. So, when using SASS in your file watcher, you have to either change paths to relative or pass --load-path node_modules/ to compiler
I ran into this issue and this solved it for me. Uncheck Track only root files, which is defaultly checked.
im import in scss #import "./libs/bootstrap-select.css";
after build given #import url(./libs/bootstrap-select.css);
i need css code in file
if import in scss #import "./libs/bootstrap-select"; norm, but
DEPRECATION WARNING on line 1, column 8 of /libsass/test.scss:
Including .css files with #import is non-standard behaviour which will be removed in future versions of LibSass.
Use a custom importer to maintain this behaviour. Check your implementations documentation on how to create a custom importer.
The latest implementation of LibSass is warning us about an upcoming change in an effort to stick to the sass standards and they primarily say that you should direct the sass/scss code to "load" your standard css file instead of importing it inline to form part of a unique css file, it won't work that way anymore, of course it is just a warning for now but in a near future they will remove that functionality, called by them "non-standard behavior" :D so I invite you to read this thread:
Including .css files with #import is non-standard behaviour which will be removed in future versions of LibSass. (GitHub issue #2362)
I just figured out a handy workaround for this problem.
Simply rename your .css file to a .scss file and import that instead, making sure to update your import statement to reference the file with the new .scss extension.
The warning goes away :)
wrap it in an url()
e.g.
#import url("{file Path here}");
I had the same problem, but only needed the .css file on one page. My solution was, instead of importing it in my .scss, to copy the .css file from my resources directory to the public directory with Gulp. Then, on the page which needed the .css code I imported it with:
<link href="path + file.css" rel="stylesheet" type="text/css">
Import works for *.scss the same way as for *.css files - just omit the extension:
#import "path/to/file";
This will import file.css
If this does not work, change your extention from the .css file to .scss and import it #import "yourfile";
I want to add .less file into my bootstrap project but I am totally new to .less so please anyone can help to add .less file into my project.
I'm trying to add .less file for color scheme here is the link
http://rriepe.github.io/1pxdeep
Thank You in advance!
You can create a new stylesheet, i.e. style.less, and reference bootstrap.less, as well as your custom Less files.
For example,
// style.less
#import "bower_components/bootstrap/less/bootstrap"; // path to bootstrap.less
#import "my-component";