I am now creating html project using sass and client requested to use material.io web component. My sass is working fine. I included material.io component through node_modeules folder. But when I tried to access material-components-web.scss like below code
//style.scss file
#import 'layout';
#import 'typo';
#import 'image';
#import 'overwrite';
#import "~material-components-web";
I got this error message in style.css file.
/*
Error: File to import not found or unreadable: ~material-components-web.
Load paths:
/Users/kenvsi/www/static/mycondo/assets/sass
/Applications/Koala.app/Contents/Resources/app.nw/rubygems/gems/compass-core-1.0.1/stylesheets
Compass::SpriteImporter
on line 5 of /Users/kenvsi/www/static/mycondo/assets/sass/style.scss
1: #import 'layout';
2: #import 'typo';
3: #import 'image';
4: #import 'overwrite';
5: #import "~material-components-web";
My question is that I would like to assess all material scss components, variable and function to my custom scss file. Is there any ways to access those material scss options in html project?
i think you miss to include the scss file.
I am using this with webpack for sass compiling.
#import "~material-components-web/material-components-web";
First "material-components-web" is a folder and second is a scss file.
Related
I have a CSS file in which I am importing other CSS files using #import. When I compile that CSS file using laravel-mix, I am unable to import the included CSS files after compilation
I have following CSScss stored in
resources/css/icheck/all.css
/* iCheck plugin skins
----------------------------------- */
#import url("minimal/_all.css");
#import url("square/_all.css");
#import url("flat/_all.css");
#import url("line/_all.css");
#import url("polaris/polaris.css");
#import url("futurico/futurico.css");
And following is my webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.styles('resources/css/icheck/all.css', 'public/css/icheck.css')
Now when I run 'npm run dev' command it should copy the imported CSS files, but I have only the following icheck.css file in public/css folder
#import url("minimal/_all.css");
#import url("square/_all.css");
#import url("flat/_all.css");
#import url("line/_all.css");
#import url("polaris/polaris.css");
#import url("futurico/futurico.css");
Now all I want is When I compile resources/css/icheck/all.css file using laravel-mix then all the imported CSS files should be copied in public/css folder
I want to use Bootstrap with SASS, but I can't find any tutorials or explanation how one can use Bootstrap with SASS. The only thing I find is installatio trough a ruby gem:
compass create my-new-project -r bootstrap-sass --using bootstrap
Which creates the following tree in my folder:
Is this enough for Bootstrap to use its own Grid, because I don't see the bootstrap.scss file, neither any Grid related files. However, I find the grid classes and all in a styles.css file. Isn't there a bootstrap.scss file that has all the mixins and everything else? And where can I find a more extended use of SASS's Bootstrap mixins, which are described here briefly:
http://www.hongkiat.com/blog/bootstrap-and-sass/
Thank You all in advance! I really can't find nothing on my problem.
(I'm using .sass files in my answer, but it should apply to .scss files, too)
Isn't there a bootstrap.scss file that has all the mixins and everything else?
Yes, there is. Here's the generated styles.sass file:
// Import Bootstrap Compass integration
#import "bootstrap-compass"
// Import custom Bootstrap variables
#import "bootstrap-variables"
// Import Bootstrap for Sass
#import "bootstrap"
bootstap_variables refers to the generated _bootstrap-variables.sass file in your project tree, whereas bootstrap-compass and bootstrap are imported from the gem's stylesheets directory.
The latter imports all other Bootstrap files, including the grid:
// Core variables and mixins
#import "bootstrap/variables";
#import "bootstrap/mixins";
// Reset and dependencies
#import "bootstrap/normalize";
#import "bootstrap/print";
#import "bootstrap/glyphicons";
// Core CSS
#import "bootstrap/scaffolding";
#import "bootstrap/type";
#import "bootstrap/code";
#import "bootstrap/grid"; # <-- here it is
...
I just recently downloaded a ready made project and it has scss files on it too. when I tried to compile main.scss file using koala-app it gives me this error.
C:\Users\1\Desktop\agency\sass\main.scss Syntax error: File to import not found or unreadable: compass/css3.
Load paths:
C:/Program Files (x86)/Koala (DEPRECATED)
C:/Users/1/Desktop/agency/sass
on line 2 of C:\Users\1\Desktop\agency\sass\partials\_base.scss
from line 4 of C:\Users\1\Desktop\agency\sass\main.scss Use --trace for backtrace.
by the way line 4 : #import "compass/css3";
I already installed:
ruby 1.9.3p545
gem 1.8.28
main.scss
// MAIN
// all modules, general styles and variables
#import "partials/base";
#import "partials/general";
// third-party
#import "vendors/supersized";
#import "vendors/font-awesome.min";
#import "vendors/brankic-icon";
#import "vendors/flexslider";
#import "vendors/animate";
#import "vendors/jpreloader";
#import "vendors/magnific-popup";
// web elements/components
#import "partials/hero-unit";
#import "partials/about";
#import "partials/services";
#import "partials/works";
#import "partials/call-to-action";
#import "partials/team";
#import "partials/testimonial";
#import "partials/contact";
#import "partials/twitter-stream";
#import "partials/footer";
_base.scss
/* ------------------ BASE STYLES ------------------ */
// import compass
#import "compass/css3";
// all variables
any suggestions would really be appreciated.. thanks ( note: newbie on sass :)
what I did was create a new sass project using ruby's command prompt "compass create newproject" then transfer the files there. then it worked.. I really did not solve the problem, thought but somehow I found a way to make it work. heres the link for reference.
I have _header.scss, _footer.scss and _main.scss and I want to combine them all into one and generate style.css.
I know it has to do with file watchers, but I haven't been able to figure out how to combine multiple files into one.
Create file styles.scss that contain this code
#import 'header';
#import 'main';
#import 'footer';
It's not a PHPStorm feature, it's a SASS feature.
In style.scss it should start out with:
#import "_header";
#import "_footer";
#import "_main";
PHPStorm doesn't have to combine the files, Scss does.
#SlawaEremkin above is correct.
Be sure that the import file is named without an underscore (not a SASS partial) otherwise there won't be an output CSS file.
Correct
styles.scss
Incorrect
_styles.scss
I'm in the initial stages of setting up a project and wanted to structure my sass files appropriately.
This is my structure:
/css
style.scss
/partials
_colors.scss
In style.scss
#import 'partials/_colors';
body {
background-color: $mainBgColor;
}
In _colors.scss
$mainBgColor: #eee;
When I attempt save style.scss, I get error on save... check file for syntax or something to that effect.
In fact, each of these #import directives produce errors:
#import 'partials/_colors.scss';
#import '_colors.scss';
#import '_colors';
#import _colors;
What am I doing wrong?
Try removing the underline and the extension on the file name, like this:
#import "partials/support";
#import "colors";
That should do it, good luck!