Gruntfile.js
In my Gruntfile.js I have following for the watch task:
watch: {
css: {
files: ['sass/**/*.scss'],
tasks: ['compass'],
options: {
spawn: false,
}
},
/* More watched tasks bellow */
}
SASS
My sass folder has one main file and folder for include files like this:
/sass/main.scss
/sass/includes/file.scss
CSS
And when the watch auto generate everything in my destination folders I have:
/css/main.css /* it includes everything from the main.scss including all #imports */
/css/includes/file.css /* includes stylesheets from the imported file. But this is useless file and /include/ folder is also an extra, that I do not need. */
I suppose it's an issue in the config line:
files: ['sass/**/*.scss']
but I do not know how to describe to in a way I get only one css folder and one main.css file without extra folders and files
You should change names of your includes files:
/sass/includes/file.scss -> /sass/includes/_file.scss
More information you can find here :
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#partials
Related
I have included css files in to nuxtJs config file,
so i want to minify them but i do not want to extract them to external css file.
Is there any way of doing this?.
Code
/*
** Global CSS
*/
css: [
"~/assets/css/tailwind.css",
"~/assets/scss/styles.scss",
"~/static/js/plugins/slick/slick.css",
"~/static/js/plugins/fotorama/fotorama.css",
"swiper/dist/css/swiper.css"
],
build: {
extractCSS: false,
}
You can use PurgeCSS and the module for NuxtJS
I added all files for template I should use in my Nuxt app (css, js, images etc.) into assets/theme folder. There is assets folder structure:
Inside assets/theme/sass/layout/_menu.scss I have this line:
background-image: url('../../css/images/close.svg');
Inside assets/theme/sass/layout/_main.scss I have this line:
#include vendor('background-image', (
'linear-gradient(to top, #{$overlay}, #{$overlay})',
'url("../../images/banner.jpg")',
It is correct path to svg file (also autocomplete works fine) but when I run app, I get error:
These relative modules were not found:
* ../../css/images/close.svg in ./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--9-oneOf-1-3!./assets/scss/main.scss
* ../../images/banner.jpg in ./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--9-oneOf-1-3!./assets/scss/main.scss
In assets/scss/ I have main.scss file that is my global file to import all other css, scss etc:
#import '../theme/css/main.css';
#import '../theme/sass/main';
Does anyone know what is the problem?
According to the offical documentation:
Inside your css files, if you need to reference your assets
directory, use ~assets/your_image.png(without a slash)
In your case i presume this will work:
background-image: url(~assets/theme/css/images/close.svg);
https://nuxtjs.org/docs/2.x/directory-structure/assets#images
did you solved it?
this works for me:
1. I added #nuxtjs/style-resources dependency to project
2. This is part of my nuxt.config.js:
css: ['~assets/css/styles.less'],
modules: [
['#nuxtjs/style-resources'],
],
styleResources: {
less: './assets/css/modules/*.less'
},
I have edit the angular.json styleext for using less
"schematics": {
"#schematics/angular:component": {
"prefix": "app",
"styleext": "less"
},
"#schematics/angular:directive": {
"prefix": "app"
}
}
I create a component and test the less it works. But now i want to mix the component css/less with the bootgstrap classes.
For example I want all button in my component to have .mx-1
I type in my less:
.btnmx-1{
.btn();
.mx-1();
}
but it failed. I tried to import :
#import "../../../../node_modules/bootstrap/dist/css/bootstrap.min.css";
.btnmx-1{
.btn();
.mx-1();
}
this one also failed to compile with error : .btn is undefined
How to fix this ? I want all buttons in my component to have margin left and right 1px inherited from bootstrap
For Bootsrap:
npm install bootsrap --save
in angular.json:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.scss"
],
For less:
add less file type instead css (by default)
comp.component.less
in angular.json.
Set the property defaults.styleExt to less.
Here's how I use bootstrap in my project
Download bootstrap Source files from link: https://getbootstrap.com/docs/4.0/getting-started/download/
create styles folders in your project copy scss folder from resource to it and rename it to bootstrap to more clearly
create your own mixin and import it bootstrap.scss file(below all of the existing imports)
import bootstrap.scss to style.scss(or in angular.json)
In my case, I just want to use bootstrap utils classes like padding, margin,heading...so I just keep these files in my boostrap scss folder
If you need all just keep all or remove some modules that need bootstrap js to run like carousel....
When using nuxt generate I am generating various HTML pages that happen to be about 300 kB in size. Majority of the file is CSS style placed inline to it. Is it a way to put it in an external file and reduce size of HTML ?
You can extract the CSS in the main chunk into a separate CSS file using
nuxt.config.js
module.exports = {
build: {
extractCSS: true
}
}
This is documented here
If you want to import css files globally use
module.exports = {
css: [
// Load a Node.js module directly (here it's a Sass file)
'bulma',
// CSS file in the project
'#/assets/css/main.css',
// SCSS file in the project
'#/assets/css/main.scss'
]
}
as documented here
I have my application sass (in scss files) in various subdirectories within my styles directory, some of which #extend sass styles from various vendors which, (via bower) are in various subdirectories under the vendor directory.
Unfortunately the sass task fails to pick up those vendor scss files and any #extend declarations I have fail as they can't find the sass they're trying to extend from, e.g.
Error in plugin 'sass'
Message:
styles/censum/censum.scss
Error: ".graph-row" failed to #extend ".row".
The selector ".row" was not found.
Use "#extend .row !optional" if the extend should be able to fail.
on line 2 of styles/censum/censum.scss
My minimised example is as follows.
gulp.task('sass', function () {
gulp.src('./styles/**/*.scss')
.pipe(gulpSass({ includePaths: ['./vendor'] }).on('error', gulpSass.logError));
});
I also tried adding the vendor directories to gulp.src and not using includePaths, e.g.
gulp.task('sass', function () {
gulp.src(['./vendor/**/*.scss', './styles/**/*.scss'])
.pipe(gulpSass().on('error', gulpSass.logError));
});
which does seem to reference the vendor files (as it drags everything in I guess), but I do get failures along the lines of:
Message:
vendor/bower/eonasdan-bootstrap-datetimepicker/src/sass/_bootstrap-datetimepicker.scss
Error: Undefined variable: "$btn-primary-bg".
on line 7 of vendor/bower/eonasdan-bootstrap-datetimepicker/src/sass/_bootstrap-datetimepicker.scss
$bs-datetimepicker-active-bg: $btn-primary-bg !default;
which is possibly an ordering issue?
What I'm sharing is based on my understanding of your question. I'll discuss it from the perspective of a new project, which seemed to work fine for me.
Let's assume we have a project called sassy and inside it is a package.json file created by running the following:
npm init -y
Then we are going to install Gulp and the SASS component like so:
npm install gulp gulp-sass -save-dev
Inside a Gulpfile.js at the root of our project we have the following code:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp
.src("./scss/**/*.scss")
.pipe(sass({includePaths: ['./vendor']}))
.pipe(gulp.dest("./dist"));
});
As you can probably guess from the above code, we have a vendor directory and a scss directory at the root of our project.
Since I don't know what is in your vendor directory, I've populated mine with randomness. Inside a vendor/colors.scss file I have the following:
.danger {
color: red;
}
.light {
color: silver;
}
I also have a nested file found at vendor/sizing/article.scss with the following code:
.title {
font-size: 22px;
}
Now let's take a look at what is inside my scss directory.
I have a scss/main.scss file with two import statements like follows:
#import "./sidebar/navigation";
#import "./content/blog";
Again, all of this project is randomness. I'm just trying to show the build process from all these files and directories.
I have two more SCSS files in my scss folder. I have a file scss/sidebar/navigation.scss with the following code:
nav {
padding: 10px;
}
Finally I have a file with a bunch of imports and extends. This file is scss/content/blog.scss and it contains the following:
#import "colors";
#import "sizing/article";
.title {
#extend .danger;
#extend .title;
font-weight: bold;
}
Because the Gulp script is including the vendors directory, we can use relative paths for any of the files. We import the two files from the vendor directory and then extend various classes where necessary.
Running gulp sass will build the CSS files in the project's dist directory. Since I only used scss/main.scss for imports, it will contain all our styles.
Is this what you were trying to do? If yes, run through everything I just shared and see if it works for you.
IncludePaths takes a string array.
Try updating to the following.
gulp.task('sass', function () {
gulp.src('./styles/**/*.scss')
.pipe(gulpSass({ includePaths: ['./vendor'] }).on('error', gulpSass.logError));
});
See docs:
https://github.com/sass/node-sass#includepaths