Why does it doesn't include the normalize.css
Those are the modules that I've written, I hope somone can help me
Look at the margin there's its' a bit off.
This might be because you haven't added semicolons (;) after the tailwind directives.
#tailwind preflight;
// ^
Related
I'm compiling Font Awesome Sass files to CSS, and it's putting a fonts folder with all the font files at the root level of my project, which I don't want.
Specifically, I installed the free Font Awesome npm package as follows:
npm install --save-dev #fortawesome/fontawesome-free
I then added the following to a vendor.scss file:
$fa-font-path: '../../../../public/fonts' !default;
#import '~#fortawesome/fontawesome-free/scss/fontawesome';
#import '~#fortawesome/fontawesome-free/scss/brands';
#import '~#fortawesome/fontawesome-free/scss/regular';
#import '~#fortawesome/fontawesome-free/scss/solid';
This is the directory structure of the project:
(Project root)
|---fonts (I don't want this one.)
|---node_modules
| |---#fortawesome
| |---fontawesome-free
| |---scss
| |---_variables.scss (Contains original $fa-font-path being overridden.)
|---public
| |---css
| |---fonts (This is the one I want.)
|---src
|---sass
|---vendor.scss (Contains new $fa-font-path definition and FA Sass imports.)
If I change $fa-font-path to '../../../public/fonts' !default; or '../../public/fonts' !default; then the build process errors out and won't compile, but '../../../../public/fonts' !default; puts all the Font Awesome font files in a fonts folder at both the project root level and in the public/fonts folder. Why is it doing this, and more importantly, how can I stop it from creating the fonts folder at the root level? Thank you.
One thing I probably should have mentioned in my question is that I'm using the laravel-mix npm module to wrap around Webpack and bundle all my assets.
Laravel Mix returns a promise from its chained calls that allows you to call then on the end of it, from which I was able to write some custom code in the then callback to always remove the fonts directory at the project root level.
Specifically, my Mix file became the following:
const mix = require('laravel-mix');
const rimraf = require('rimraf');
mix.js('src/js/app.js', 'public/js/')
.extract(['vue'])
.sass('src/sass/vendor.scss', 'public/css/')
.sass('src/sass/app.scss', 'public/css/')
.then(() => {
rimraf.sync('fonts');
});
rimraf is an npm module that basically allows you to run rm -fr on a directory. The module can be gotten here: https://www.npmjs.com/package/rimraf
I created a new cli project with --style=sass and then defined some variables in the src/sass/styles.scss (no partials created) so they should be globally defined right? , so when i tried to use them in home.component.scss i got this error https://imgur.com/a/IckJL14
i then added a black border just to make sure normal css works and it did work , the problem is with sass ,
here's the angular.json
"styles": [
"src/sass/styles.scss",
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/malihu-custom-scrollbar-
plugin/jquery.mCustomScrollbar.css",
"./node_modules/animate.css/animate.min.css",
edit: i then created a partial _variables.scss and in the component.scss i wrote #import '~sass/variables'; after importing them in the styles.scss like so #import './variables'; according to the guide from this link : https://scotch.io/tutorials/using-sass-with-the-angular-cli
still not working.
The best approach to achieve this, is creating a variable file and import this file in your scss files.
Like so:
#import "../../variables.scss";
or
#import "~variables.scss";
And in your styles.scss you just put a reference of your variable file!
If it's correct that you used the --style=sass option on project init, then that might be the problem. If you intend to use .scss files (which I would recommend), then you should have used --style=scss.
To fix this now, you can run the command ng set defaults.styleExt scss.
the answer was to simply add the full path to the component.scss like so,
#import "src/sass/~variables.scss"; instead of just #import "~variables.scss";
Trying to build custom workflow with gulp, panini, mustache, sass and one of my problem is including partials from node_modules, here is example from main.scss file:
#import "node_modules/bootstrap/scss/mixins";
#import "settings";
How to avoid typing full path to _mixins.scss?
Your question is similar to this: Sass import not crawling node_modules to find appropriate package
You can include paths by passing the includePaths argument to gulp sass. e.g
.pipe($.sass({
includePaths: ['node_modules/bootstrap/scss/', 'another/path']
})
You can include node_modules in sass pathes:
.pipe(sass({
includePaths: ['node_modules']
})
Then you can import library's sass like this:
#import "bootstrap/scss/bootstrap";
Or, in case of material-components-web:
#import "#material/top-app-bar/mdc-top-app-bar";
This way:
you don't need to add each lib to path
the sub-dependencies imports will work seamlessly, e.g. mdc-top-app-bar in MDC example imports "#material/elevation/mixins".
Use includePaths or you could resolve NPM modules like this:
#import "~bootstrap/scss/mixins";
#import "settings";
There are some libraries for this sass-globbing, but I personally don't like this approach, because in CSS matters on import order.
Best practice is IMHO create some file vendor.scss;
#import "~bootstrap/scss/mixins";
#import "~bourbon/...";
and then import this vendor.scss:
#import "vendor.scss"
#import "partials/..."
For anyone else that stumbles here, if you're using gulp-ruby-sass instead of node-sass you would use
loadPath: ['node_modules/bootstrap/scss/']
instead of
includePaths: ['node_modules/bootstrap/scss/']
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 upgrading a rails app with lots of SCSS stylesheets to use the asset pipeline, and need to include some global variables and mixins for each file.
Adding several #import directives at the top of every file isn't very DRY, so I'd like to do something like this:
# application.css
/*
*= require variables
*= require mixins
*= require_tree .
*/
This doesn't work of course, because the variables are not persisted across files. Anyone know how to achieve this?
The default manifest syntax isn't powerful enough to give you useful Sass features like shared variables, mixins, etc. Instead, you should:
Rename application.css to application.scss (or application.css.scss in Rails 4 or earlier)
Instead of using the
/*
*= require variables
*= require mixins
*= require_tree .
*/
nonsense, you should now use
#import "variables";
#import "mixins";
#import "blah"; // import each SCSS file in your project like this.
This will ensure you have full benefit of your variables and mixins throughout your project, and you are kept as DRY as Sass allows.
Simply importing the necessary file from each Scss or Sass file seems to have worked for me. For example, I have a colors.scss file that includes some constants like this:
$black: #222;
I require it in my application.css manifest along with some other files:
/*
*= require colors
*= require buttons
*/
In my buttons.css.scss file, I simply do this to avoid the error:
#import "colors";
Doesn't seem to be possible. Ended up prepending each file with #import 'includes/all'; and including everything else from includes/all.css.scss.
Replace require with #import and remove any = require even if you think you've commented it out.