Actually for a recent project i downloaded a theme (Admin Panel). It mostly contains css in parts in the form of .scss files . I tried editing files directly from style.css but nothing seems to change . so i did little bit of research and found that scss files need to compiled again . I don't know how to compile .scss files. On their github page i found that it can be changed with the help of following commands
gulp serve
I don't know the above command was to compile again scss into css but it didn't work
So ,kindly help with this or just a provide a link to the tutorial from where i could learn this
Here's the link for the project that i have just downloaded
https://github.com/BootstrapDash/PurpleAdmin-Free-Admin-Template
Thanks in Advance
Setting up a SCSS compiler for a project where you don't use SCSS yourself is tedious. Instead, try compiling it quickly and edit the CSS files after you compiled it.
You can use free compilers online, for example https://www.cssportal.com/scss-to-css/.
If you would like to start a project with SCSS where you compile it, you can indeed use the GULP setup provided by Bootstrap.
https://mdbootstrap.com/bootstrap-gulp-tutorial/
You can also easily setup Gulp yourself:
https://codehangar.io/gulp-sass/
The above URL explains the following a little more extensive:
npm install gulp-sass --save-dev
Structure:
-index.html
--assets
---styles
----sass
-----index.scss
----css
The 'styles' Task
//gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
//style paths
var sassFiles = 'assets/styles/sass/**/*.scss',
cssDest = 'assets/styles/css/';
gulp.task('styles', function(){
gulp.src(sassFiles)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(cssDest));
});
Watcher
gulp.task('watch',function() {
gulp.watch(sassFiles,['styles']);
});
gulp watch
Related
I'm trying to import a sass partial (_variables.scss) to use in my main stylesheet (global.scss), but I keep getting the Error: Undefined variable. on sass compiling.
Directory structure:
app
└─public
└─styles
│ global.css (output for sass compiling is here).
└─sass
└─_variables.scss
└─global.scss
_variables.scss
$font-text: 'lato', sans-serif;
global.scss
#use '_variables';
body {
font-family: $font-text;
}
Looking at the Sass documentation, I understand to use #use instead of #import (which works) because they are phasing it out.
What am I doing wrong here? Thanks.
That's because you are not using Dart Sass which supports this feature.
Also in the documentation you will find:
Only Dart Sass currently supports #use. Users of other implementations must use the #import rule instead.
So use #import until #use is supported.
BTW, If you want to use Dart Sass, just use sass instead of node-sass and require it in the webpack config, like:
// ...
{
loader: 'sass-loader',
options: {
implementation: require('sass')
}
}
// ...
This is a very important update to the accepted answer by #llobert. After hours of searching, it turns out node-sass relies on libsass which is the C++ implementation of sass. According the docs for the libsass repository this C++ implementation has been deprecated.
Okay, so you may think, as easy as installing dart-sass, however you will find the docs have fallen behind here as well. If you go to dart-sass on npm you'll find:
So what you have to do now is:
npm install sass
And just in case, like myself, the reader of this is researching the whole sass affair because they are using gulp-sass:
At the bottom of the gulp-sass npm page you will find this tid bit.
Ah, what do you know. The default hasn't changed, but the underlying libsass libary has fallen behind due to depreciation. Thus you must add this to your gulp file:
var sass = require('gulp-sass');
sass.compiler = require('sass');
So long story short, there are some changes going on in the SASS world that have been drastic, but yet seemingly happened very quietly. I hope this recount of my last few hours will save some future devs a lot of time searching till the docs get sorted out.
Short Answer
You can access variables, functions, and mixins from another module by writing < namespace >.< variable >, < namespace >.< function>()>, or #include < namespace >.< mixin >(). By default, the namespace is just the last component of the module’s URL.
That means by using variables.$font-text
global.scss
#use '_variables';
body {
font-family: variables.$font-text;
}
SASS Documentation on Loading Members
Long Answer
So the answer or #llobet was using webpack and the answer of #Jamie Marshall was using gulp file, but I was trying to use SASS using Node JS and needed a step by step guide to make it work.
Here is how I made #use work - Step by step guide using Dart Sass with Node JS.
1. Create New Node Project
npm init
2. Install Dart SASS
npm i sass
Optionally you can also install AutoPrefixer using npm install postcss-cli autoprefixer
3. Configure NPM Script to Compile SASS
In Package.json, add script compile:sass to compile sass to css
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"compile:sass": "sass --watch scss:assets/css"
},
4. Create SCSS folder and inside it create style.scss file
Above script compile:sass expects a folder called scss on the root of the project and a .scss file inside that folder
Paste the following inside .scss file
#use '_variables';
body {
font-family: variables.$font-text;
}
5. Create Partial file _variables.scss
Create a partial file named _variables.scss on the same directory scss and paste the following code in it
$font-text: 'lato', sans-serif;
6. Compile SASS to CSS
Run the following script inside your project's root folder to compile SASS to CSS
npm run compile:sass
Now you would see a folder named assets and inside it there would be a folder named css and inside it your css file would be compiled.
I have a project which a dependency on Bootstrap. I'm customising the Boostrap variables so using gulp to do a custom compile of Bootstrap's LESS source. The rest of the CSS in my project is written with SASS. I have an imports.sass file which includes the following line:
#import '../bootstrap/compiled/custom-bootstrap';
What I'm trying to do is compile the Bootstrap LESS to CSS, then run a SASS task to create a CSS file which includes the compiled Bootstrap CSS. My 2 gulp tasks which achieve this are as follows:
gulp.task('bootstrap', function () {
return gulp
.src('assets/bootstrap/custom-bootstrap.less')
.pipe(less())
.pipe(gulp.dest('assets/bootstrap/compiled'));
});
gulp.task('sass', function () {
return gulp
.src('assets/scss/*.scss')
.pipe(sass({
includePaths: ['assets/bootstrap/compiled']
}).on('error', sass.logError))
.pipe(gulp.dest('assets/css'));
});
The first time I run this, the bootstrap task completes successfully, but the sass task throws this error:
Error in plugin 'sass' Message:
assets\scss\_imports.scss Error: File to import not found or unreadable: ../bootstrap/compiled/custom-bootstrap
Parent style sheet: [path/to]/assets/scss/_imports.scss
on line 5 of assets/scss/_imports.scss
>> #import '../bootstrap/compiled/custom-bootstrap';
^
When I run it a second time both complete successfully so clearly the problem is the fact that custom-bootstrap.css doesn't exist at the start of the initial run. However, you can see I've added the relevant includePaths option which seems to be the solution for other similar issues elsewhere on SO. Perhaps I'm not specifying this path correctly?
To complete the information you need, here is the structure of my solution detailing the relevant files. I'm confident the paths I've used are correct but just in case I've missed something...
assets
bootstrap
custom-bootstrap.less
custom-variables.less
scss
_imports.scss
main.scss
gulpfile.js
In case it's relevant, this is the front-end for an ASP.NET solution so I'm using Visual Studio's task runner to execute the gulp tasks, and this also explains why gulpfile.js is in the root of the project.
I have set up a gulpfile.js in my project. It's working pretty nicely mostly, except when it comes to generating source maps, especially for the LESS files it compiles to CSS.
I have put together a gist which contains all the files in my gulp setup. Please note that other than the gulp file.js itself, all the other files are inside a directory called tasks.
The problems I am having are that
I had to disable the autoprefixer in development because the source maps that were being generated were invalid as the autoprefixer modified the original CSS file after the source maps were generated. To compensate, I have added mixins that add the vendor prefixes during development, and I have to disable those for development and enable the autoprefixer for the production environment.
I am unable to generate a minified CSS file at all if I want source maps. The minification breaks the source maps.
Although I have LiveReload set up, and the associated browser plugins, I cannot get the CSS to get auto-injected into the page as I am making changes.
If anyone can help me structure my gulp file.js to work more efficiently and more effectively, I would appreciate it.
Again, my gulpfile.js and associated tasks are in this gist.
I had to disable the autoprefixer in development because the source maps that were being generated
The docs at https://www.npmjs.com/package/gulp-autoprefixer describe how to use the autoprefixer with gulp-sourcemaps:
gulp.task('default', function () {
return gulp.src('src/**/*.css')
.pipe(sourcemaps.init())
.pipe(autoprefixer())
.pipe(concat('all.css'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist'));
});
The above create a new source map for all.css. So you should load the sourcemap generated by the less compiler first, see https://github.com/floridoo/gulp-sourcemaps#load-existing-source-maps
The docs of gulp-minify-css do not describe such an usage, but possible you can do:
gulp.task('minify-css', function() {
gulp.src('./static/css/*.css')
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(minifyCSS({keepBreaks:true}))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./dist/'))
});
Notice that in most cases you minify only your code for production. Development code, which has source maps should not have to be minified.
Since version 2 of Less you can use plugins for the Less compiler. Also gulp-less allows you to use these plugins (programmatic) see also http://lesscss.org/usage/#plugins-using-a-plugin-in-code
Documentation of gulp-less describes how to use the clean-css and autoprefix plugin at https://github.com/plus3network/gulp-less#plugins. Notice that gulp-minify-css is leveraging clean-css's code too.
Also the usage of gulp-less with gulp-sourcemaps to create sourcemaps has been described at https://github.com/plus3network/gulp-less#source-maps
So you should be able to use:
var LessPluginCleanCSS = require("less-plugin-clean-css"),
cleancss = new LessPluginCleanCSS({advanced: true});
var LessPluginAutoPrefix = require('less-plugin-autoprefix'),
autoprefix= new LessPluginAutoPrefix({browsers: ["last 2 versions"]});
gulp.src('./less/**/*.less')
.pipe(sourcemaps.init())
.pipe(less({
plugins: [autoprefix, cleancss]
}))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('./public/css'));
The above should generate the autoprefixed and minified CSS of your Less source, with CSS sourcemaps written into ./public/css/maps
I want to use semantic-ui within ember-cli project, having trouble with including fonts.
bower install semantic-ui
Import css and fonts in Brocfile.js
app.import('bower_components/semantic-ui/dist/semantic.css');
app.import('bower_components/semantic-ui/dist/semantic.js');
var semanticFonts =
pickFiles('bower_components/semantic-ui/dist/themes/default/assets/fonts', {
srcDir: '/',
files: ['**/*'],
destDir: 'assets/themes/default/assets/fonts'
});
This works, because semantic.css looks for themes/default/assets/fonts relative to itself.
Note the destDir: 'assets/themes/default/assets/fonts', this is because ember-cli puts the semantic-css within assets/ folder, and I have to put the fonts in that folder. But this looks like a hack is there a better solution?
Finally semantic-ui dist folder doesn't include different build options, do I have to compile the project myself eg: using gulp?, I thought using bower it should be straightforward.
We also got 404's for the fonts after installing Semantic via Bower. We solved it by adding the font folder as a tree to the Ember build.var
EmberApp = require('ember-cli/lib/broccoli/ember-app');
var pickFiles = require('broccoli-static-compiler');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
babel: {
includePolyfill: true
},
fingerprint: {
extensions: ['js', 'css', /*'png', 'jpg', 'gif',*/ 'map']
}
});
app.import('bower_components/semantic/dist/semantic.css');
app.import('vendor/shims.js');
var semanticIcons = pickFiles('bower_components/semantic/dist/themes/default/assets/fonts', {
srcDir: '/',
destDir: '/assets/themes/default/assets/fonts'
});
return app.toTree([semanticIcons]);
};
Looking at semantic-ui, it seems pretty gigantic, and specifically setup with gulp.
First off, I would use the flag --save in your bower request.
bower install --save semantic-ui
This will add it as a dependency to your bower.json automatically - or --save-dev if it's only for development and not production.
Semantic-ui looks like it's written in "LESS", so not only do you have to deal with a favored build tool, but also it has opinions about the preprocessor.
The fonts involved seem to be just some google includes, and some svg fonts.
My advice, if you really really want to use a monstrous set of CSS declarations like this, - in this situation - would be to take the /dist output .css and .js -and- combine it with YOUR favorite css pre processing setup - and just override where appropriate. - or borrow the forms or whatever specific styles lead you to want to use this.
I am worried that fully integrating it into your ember project wont be as smooth as intended... and that you won't get a terribly useful amount of stuff out of keeping it in sync.
Just my opinion, - but I can't comment yet. - and I think you would be better off just writing the styles in stylus from scratch anyways. : )
I had the same problem.
I don't know if there's a better way, but I added the following line to the config/application.rb
config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components', 'semantic-ui', 'dist')
This adds the dist folder to the asset path, so when semantic-ui is looking for /themes, it will be picked up.
I'm building a custom Wordpress theme using Zurb's Foundation 5 and compiling it with Gulpjs which is amazingly fast. I have Gulpjs installed in my WP themes folder and it compiles my app.scss file everytime I save it perfectly. However if I make any changes to any of the Sass partials included in Foundation, Gulp doesn't automatically compile them until I make a change to the app.scss and save app.scss again.
Is there a way automatically compile when I make changes to the partials, or any other .scss file included in my theme for that matter, when I save them?
Here's a link to the starter theme I'm using, showing all the files I'm using. The gulpfile.js can be found in the root folder.
https://github.com/schikulski/gromf
Thanks!!
Figured it out! If anyone needs similar help.
I added
'bower_components/foundation/scss/foundation/components/_*.scss'
to the gulpfile.js
gulp.task('sass', function (){
gulp.src([
'bower_components/foundation/scss/normalize.scss',
'bower_components/foundation/scss/foundation/components/_*.scss',
'assets/scss/app.scss'])
.pipe(sass({style: 'compressed', errLogToConsole: true}))
.pipe(concat('main.css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('assets/css/'))
.pipe(livereload());
util.log(util.colors.yellow('Sass compiled & minified'));
});
Have you tried adding 'bower_components/foundation/scss/foundation/foundation.scss' to your source? That is the file with all of the #import's for foundation.