I want to be able to "#import" a file with SASS depending on a Grunt parameter.
With grunt I want to:
grunt someTask --skinName=yellow
Inside app.scss I want to somehow use this parameter:
#import "$skinName";
Some context...
This skinName.scss contains a lot of SASS variables with color codes so that I can easily change colors all over the app. I Should be included before all my SASS #imports.
You could solve this with another scss file that is written by grunt during the build process:
grunt.registerTask('skin', function () {
grunt.file.write('skin.scss', '#import "' + grunt.option('skinName') + '";');
});
Then simply import the skin.scss in your app.scss.
Related
I started using Vue using the Vue CLI template. In that template you create a file called 'vue.config.js' to define some settings. More to find here: https://cli.vuejs.org/guide/css.html#css-modules
I had a settings for an global css/sass file so all my components could access the variables (the file only contains vars).
vue.config.js:
module.exports = {
// So we can use the template syntages in vue components (correct me if am wrong)
runtimeCompiler: true,
// CSS settings
css: {
loaderOptions: {
sass: {
// Load in global SASS file that we can use in any vue component and any sass file
data: `
#import "#/assets/css/variables.scss";
`
}
}
}
};
Now I am working on another project. This time I use laravel and vue in one app. Laravel makes Vue works with webpack and webpack.mix.js.
Now here is where I get stuck. I can't create a config so the global css file with the variables can be recognises in the vue "one file components" I can't find any solution on the internet or my own experience to make this work.
Anyone experience with this?
Laravel mix has a shortcut to "indicate a file to include in every component styles" (look for globalVueStyles in the option available). So simply add the code below to the webpack.mix.js file at project root.
mix.options({
globalVueStyles: `resources/assets/css/variables.scss`
});
And install the dependency sass-resources-loader
npm install --save-dev sass-resources-loader
It works only as relative path. Also, the docs say that this option only works when extractVueStyles is enabled, however it was not needed for me.
To have more control over "vue-loader" you can use the undocumented function mix.override
mix.override(webpackConfig => {
// iterate and modify webpackConfig.module.rules array
})
I have a cdn hosted .scss file that contains a sass variable that I need to access from my code. The hosted file basically looks like this:
http://hostedsite/styles.scss
$styles: (
$icons: (
'heart': '\ea01',
'star': '\ea02',
'cloud': '\ea03'
)
)
And in my project I'd love to be able to do something like this:
#import url("http://hostedsite/icon.scss");
#each $icon, $value in map-get($styles, 'icons') {
.#{$icon} {
&::before {
content: $value;
}
}
}
Is it possible to do this? I keep getting errors that $styles is undefined. I'm using gulp-sass if that matters at all.
Sass will not compile any files from a remote location
(Can I import an externally hosted file with sass?)
However you can use a loader (For Webpack: Webpack Sass Loader, Universal: Postcss import url) with an task runner of your choice that goes through the files and looks for imported url's.
I am having trouble connecting files.
file style.scss
#import 'foundation/foundation';
file foundation/_foundation.scss
/**
Some comment
*/
#import '../../../node_modules/foundation-sites/_vendor/normalize-scss/sass/normalize';
outputed file style.css
/**
Some comment
*/
As you can see I am getting only comment, no imported CSS rules.
Here are my gulp tasks
gulp.task('sass', function () {
return gulp.src('./app/scss/style.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./public/css'));
});
gulp.task('watch', () => {
gulp.watch('./app/scss/**/*.scss', ['sass']);
});
I have not used gulp node sass yet, but have found for cli access as well as manual processes, you need include-path items or an importer function, even if you use explicit paths within the import calls.
You should also check to see that what you imported is not all mixins and functions/variables, since they only operate on the include calls that summon them. if you set a variable and never use it, it won't compile css
Also: you are having it watch a recursive path for sass changes, but hard coded the input, try accepting stdin/pipe on the sass task
My goal is to use one scss file with n number of asset partials to create n number of css stylesheets while using gulp-ruby-sass.
Here is an example of my directory structure:
- project_folder
gulpfile.js
- css
_asset.scss
style.scss
Inside "gulpfile.js" would have the following:
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
gulp.task('build', function() {
return sass([
'css/_asset.scss',
'css/**/*.scss'
])
.pipe(gulp.dest('css'));
});
gulp.task('default', ['build']);
Inside "_asset.scss" would have the following:
$textColor: #444444;
Inside "style.scss" would have the following:
//#import "_asset";
.myTextColor {
color: $textColor;
}
By running gulp I would get the error:
error css/style.scss (Line 3: Undefined variable: "$textColor".)
Let's say I was to uncomment line 1 in style.scss. Then running gulp should properly compile style.scss to create style.css, but uncommenting line 1 is not the answer I am looking for. I need gulp to use gulp-ruby-sass or some other plugin to do exactly what line 1 on style.scss is doing, or something like on to it, and get the same results.
P.S. (Hopefully, with this solution I can use 'gulp-rename' and be able to produce multiple css stylesheets using multiple asset files, and only use one scss file!)
Hi everybody I'm new to learning Gulp and I can't seem to get over this hurdle. I am trying to compile my sass and I will set it to gulp-watch. It will work fine for a little while, but then it will show an error- the file is not found or unreadable.It looks something like:
events.js:154
throw er;// Unhandled 'error' event
Error: app/scss/main.sass
Error: File to import not found or unreadable: layout1
Parent style sheet: stdin on line 2 of stdin
I have tried to look on this site for the solution to my problem and I thought putting the includePaths would work (maybe I'm doing it wrong) but I'm still getting errors. Could someone please help me out?Here are some images of my project. Here is a link to some pictures: http://imgur.com/a/pQBHV
Looks like there are a few issues:
1) You should probably use the scss extension with all your files and update the sass task in your gulp file to watch for changes like so: gulp.src('app/scss/*.scss') or since, in theory, all files contained in that folder should be sass, you could do this instead: gulp.src('app/scss/*') which will watch all the files in the directory.
2) There's also an issue with the names of your sass files. You need to prepend the files you wish to import with an underscore so the compiler knows these files are partials.
So your sass files should look like:
_layout1.scss
main.scss
_normalize.scss
_styles.scss
And import the partials in main.scss:
#import 'normalize';
#import 'layout1';
#import 'styles';
More info http://sass-lang.com/guide#topic-4