Im using Grunt SASS
https://github.com/sindresorhus/grunt-sass
Is it possible to convert my image paths to be absolute? So if I write this:
.something {
background: url(../icon.png);
}
I would like the compiled CSS to be:
.something {
background: url(www.mysite.com/images/icon.png);
}
This can be done with grunt css url replace:
https://www.npmjs.com/package/grunt-css-url-replace
However this isnt ideal. Running an additional task will be slower and I expect this will mess up my source maps. An add on / config setting for grunt sass would be better but I cant seem to find one.
Related
How can I compile a SASS file and have it output all the final values of every variable in a json file
I asked a similar question before and someone on here thought I was trying to get you guys to do my job. I'm just trying to see if it's possible at all before I go down a path that ultimately is a waste of time. If it is possible, I don't know the magic sauce to get started.
I have CMS themes that are built on bootstrap-sass, and other sass frameworks, and I'd like my CMS to be able to access variables that we use in the SASS files as well. Seems to me that if when I compiled the SAAS file, I got a CSS, MAP, and JSON file, I'd be all set.
I could write this as some kind of mixin, but even then, I'd need to be able to get
A list of all variables
a command to output json to the dist folder.
Any pointers on these items are appreciated.
If you're using Gulp to compile your SASS there is a plugin that accomplishes this.
https://www.npmjs.com/package/gulp-sass-json
After installing it, and given the following Gulpfile.js:
var sassJson = require('gulp-sass-json');
var paths = {
'json_root' : './bundles/theme/scss/variables/*.scss',
'json_dest' : './json'
};
var sassOptions = {
errLogToConsole: true,
outputStyle: 'expanded'
};
gulp.task('sass-json', function () {
return gulp
.src(paths.json_root)
.pipe(sassJson())
.pipe(gulp.dest(paths.json_dest));
});
gulp.task('default', ['sass-json']);
Given the SCSS file variables/colors.scss:
$red: #ed1414;
$blue: #0351e0;
$green: #259208;
Outputs the following json at ./json/colors.json
{
"red": "#ed1414",
"blue": "#0351e0",
"green": "#259208"
}
So in order to have it re-output it every time you compile, you can just create a task that encompasses this task as well as your normal style compile task.
How can I set Sass to validade my scss files and output any errors on console?
I am writing this class in order to test it:
.test {
color: #ff3;
border-right: 5px solid blueee
aaaaaa
}
And when I hit Save, the console shows:
>> File "scss/app.scss" changed.
Running "sass:dist" (sass) task
Done, without errors.
But obviously as you can see, there is an error on my scss file. How can I display that on console?
Your best bet would be to try either a Sass linting tool or a CSS linting tool (or both) depending what it is you want to do.
For Sass there is grunt-scss-lint
For Css there is grunt-contrib-csslint
I'm using Gulp as my build system.
I need to identify links pointing to external websites with the scss following rule:
// Links to external websites
a[href*='//']:not([href*='example.com']) {
&::after {
content: ' \e895';
font-family: 'Material Icons';
}
}
OR
$baseURL: 'localhost:3000'; // Set this variable based on environment
a[href*='//']:not([href*='#{$baseurl}']) {
...
}
When I'm running a development server the address I'm serving files from is localhost:3000, not example.com. The result is that every single link on the website (on the dev server) has a small icon indicating the link goes to an external website, which is really distracting.
What's the best way to set a scss variable based on an environment setting?
Edit:
This solution works, but it introduces a temporary file, which I'm not wild about. I moved my _variables.scss into the scss root, I process this file and output it into the base subdirectory where it is used to compile the scss. I would then add scss/base/_variables.scss to my .gitignore to avoid committing to version control.
_variables.scss
$baseURL: '/* #echo PATH */';
Gulpfile.js
// Set baseurl as Sass variable -- used to identify external links
gulp.task('sass-vars', function () {
var baseURL = (config.production) ? 'example.com' : 'localhost:3000';
return gulp.src('./scss/_variables.scss')
.pipe($.preprocess({context: {PATH: baseURL}}))
.pipe(gulp.dest('./scss/base'));
});
Yes, it is possible to do that.
To get environment variables there's a package: gulp-env
To remove these links from static files: gulp-preprocess
But it's also important to check these changed files, not to commit them as a development version. Hooks to your VCS is an option.
I'm currently working with Middleman to build up a new page, but now the image-url helper doesn't seem to be working.
In my config.rb I have:
#Use relative URLs
activate :relative_assets
set :css_dir, 'stylesheets'
set :js_dir, 'javascripts'
set :images_dir, 'images'
In my applications.css.sass I have this:
body
background: image_url("background.png")
The background image is in images/background but Middleman doesn't find/load that image. It just puts this out:
body {
background: url("../images/background.png");
}
Does anyone know what I'm doing wrong?
#Use relative URLs
activate :relative_assets
I believe this is within the "build" configurations so it won't have any effect on your working file that you are viewing in middleman local server.
for me using this works "/images/hp/wmn.png"
I guess you just need to figure out the write path to your asset, as a temporary solution you can use an absolute link starting with your local server address
//0.0.0.0:4567/ for mac or
//localhost:4567/ for windows
body {
background: url("/images/background.png");
}
I can't get the Rails 3.1 asset pipeline precompilation to work in production mode. It always fails on images referenced within SCSS with an error like:
$ bundle exec rake assets:precompile RAILS_ENV=production
rake aborted!
rails.png isn't precompiled
(in /home/florian/AssetTest/app/assets/stylesheets/application.css.scss)
But when I look in the public/assets directory, the image is there, so it is precompiled:
$ ls public/assets | grep rails
rails-dd352fc2630e5f9aa5685ef1d7fe5997.png
The SCSS file in this case just contains some test code:
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require_tree .
*/
body {
background: #ffffff image-url('rails.png') no-repeat 0 center;
}
If I don't use the image-url helper in SCSS, but just url('/assets/rails.png'), precompilation works fine, and a manifest.yml file is generated in public/assets.
The interesting thing is: if I change the SCSS back to image-url('rails.png') and run another precompilation, it still works (I guess because the image is now already listed in the manifest file).
What am I doing wrong here? I don't really want to disregard the helper methods (as using them is The Way You Should Do It, right?), and I definitely don't want to create the manifest file manually...
I've run into the same problem myself. This is apparently a bug in Rails 3.1.0, and will hopefully be fixed in short order...
In any event, in production.rb, you can try this:
config.assets.compile = true
You likely have it set to false, which it should be. However, having it set to false causes issues when you use asset helpers in SCSS as you're trying to do. Setting that value to true seems to properly allow compilation while using those helpers.
Take a look at this issue on github for some details.