I setup a new ionic project using the -s option to enable SASS.
Here is a part of my /myproject/scss.ionic.app.scss:
...
$positive: #2a8000 !default;
$button-font-size: 30px !default;
// Include all of Ionic
#import "www/lib/ionic/scss/ionic";
When saving this scss file, I can see in the shell that sass is launched and css is re-built:
[00:18:18] Starting 'sass'...
CSS changed: www/css/ionic.app.css
[00:18:18] Finished 'sass' after 330 ms
CSS changed: www/css/ionic.app.min.css
However, the new css file seems to be exactly the same, whatever I put into the scss file.
Can you explain why?
Thanks a lot.
It was pretty stupid...
I didn't pay attention that SASS generates the new css in www/css/ionic.app.css
However, the file included in the default ionic index.html is lib/ionic/css/ionic.css
The only thing to do is to write
<link href="css/ionic.app.css" rel="stylesheet"> in index.html
and remove
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
To solve this in my project, I had to install gulp first.
npm install -g gulp
Related
I installed bootstrap and JavaScript through NPM in Laravel 6 and it's working fine since i am able to use bootstrap in my web page. But whenever i am adding custom styling in resources/sass/app.scss folder, the custom styling isn't works.
You need to compile the app.scss file. Please run
npm run dev
This will compile your scss file to public/css/app.css. Now you can link the css in your blade template as:
<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}" />
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
The Problem:
I am updating a website that was created using Compass. I installed Compass and then ran the following command to set up Compass with my existing project. Next I imported Compass into my global.scss file. SASS-Autocompile (a package for the text editor Atom) fails to locate the file and throws a compilation error. I am not sure if this is an issue with the set up of compass or if it is a problem with SASS-Autocompile. Here are the steps I took which led up to this point.
compass create --sass-dir "scss" --css-dir "css" --images-dir "images"
Output:
*********************************************************************
Congratulations! Your compass project has been created.
You may now add and edit sass stylesheets in the scss subdirectory of your project.
Sass files beginning with an underscore are called partials and won't be
compiled to CSS, but they can be imported into other sass stylesheets.
You can configure your project by editing the config.rb configuration file.
You must compile your sass stylesheets into CSS when they change.
This can be done in one of the following ways:
1. To compile on demand:
compass compile [path/to/project]
2. To monitor your project for changes and automatically recompile:
compass watch [path/to/project]
More Resources:
* Website: http://compass-style.org/
* Sass: http://sass-lang.com
* Community: http://groups.google.com/group/compass-users/
To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
<link href="/css/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="/css/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="/css/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
global.scss
#import "compass";
Terminal: (while in project root dir)
compass compile
Output:
warning Webkit only supports pixels for the start and end stops for radial gradients. Got: 70%
write css/global.css
Then I save my global.scss file which runs SASS-Autocompile and this error is presented.
SASS-Autocompile: Compiliation Error
{
"message": "File to import not found or unreadable: compass.
Parent style sheet: /Users/robby/Documents/reseminary/wordpress/wp-content/themes/dev.reseminary.edu/scss/global.scss",
}
I'd like to use Bootstrap with Laravel 5.4. According to the docs
The default webpack.mix.js included with Laravel will compile the resources/assets/sass/app.scss SASS file. This app.scss file imports a file of SASS variables and loads Bootstrap, which provides a good starting point for most applications. Feel free to customize the app.scss file however you wish or even use an entirely different pre-processor by configuring Laravel Mix.
How do I include the app.scss file. i.e. -- if this were an app.css, I'd like link it in the head of my document. However, as its an app.scss file, the browser won't understand it natively (or will it?) and I'm not sure how Larval expects us to insert this into the page.
After building your assets with something like npm run dev or npm run prod, you'll get a plain old app.css file somewhere in your public tree. After that, a little
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
in your blade templates and you should be good to go.
Before you can use app.scss you need to compile scss file to css and move the compiled file to public directory in your Laravel project root.
Where you store compiled css is up to you, most people store css in public/css/app.css
There are several automation tools you can use to compile app.scss such as Laravel mix, gulpjs, grunt etc.
To learn more about compiling scss files start here: https://laravel.com/docs/5.4/mix
However, you mustn't go through all these processes in order to use Bootstrap in Laravel blade
Simply move bootstrap files (css,js) to Laravel public directory and use then like so in your blade template.
<head>
<title>Page Title</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="{{assets('css/bootsrap.css')}}" />
</head>
I wanted today to try scss support of yeoman.
I followed the procedure :
$ yo angular
include Twitter Bootstrap? Yes
use the SCSS version of Twitter Bootstrap with the Compass CSS Authoring Framework? Yes
$ grunt server
And then the default view load but without style formatting. In the console I can see that it cannot find /styles/main.css file.
I have seen that compass put the file in .tmp/styles/main.css, so I tried to change it in index.html. But the same. Moreover there is no .tmp directory in my project folder.
So I ran "grunt build" and loaded the index.html in dist directory in a MAMP server. Same, no css formatting, moreover no error in the console
You shouldn't be putting the '.tmp' path anywhere in your index.html, it should be left pointing to 'styles/main.css' like so:
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
You should also have your actual style file at 'app/styles/main.scss', which Yeoman should have created for you. When you run 'grunt server' it uses compass to compile all the scss files into a single css file which it temporarily puts under '.tmp', but as long as your scss files are in place you should not need to worry about this. My guess would be that you've somehow deleted or renamed the main.scss file; you should not be renaming this to 'main.css' for example.
I had the same issue, your main.scss file has issues with bootstrap css
I deleted the line ( 2. line )
#import 'bootstrap-sass-official/vendor/assets/stylesheets/bootstrap';
and have no more issues. it compiles to main.css