I have a problem with Web Compiler with VS2015 Update 1 and Sass.
In my Scss file, i declared some images as background.
Example :
.example {
background-image: url(images/ex.jpg);
}
In the file compilerconfig.json, the outPutFile is not in the same directory.
In the file compilerconfig.json.defaults, i set relativeUrls as false in sass section.
When i compile, url becomes relative like :
.example {
background-image: url(../../../../../images/ex.jpg);
}
I have the same problem with imported file.
Is there any way to resolve this ?
I found how to disable relative urls :
the option is not to set in the file compilerconfig.json.defaults but in compilerconfig.json :
[
{
"outputFile": "../../../../../inetpub/wwwroot/ui/skins/test.css",
"inputFile": "Web/Stylesheets/test.scss",
"minify": {
"termSemicolons": true
},
"options": {
"relativeUrls": false,
"lineFeed": "crlf"
}
}
]
Related
How can I convert inline-CSS to CSS-files in nuxt.js? I have both scoped styles and global scss file in my app.
I have already tried below code but no luck.
build: {
optimization: {
splitChunks: {
chunks: 'all',
automaticNameDelimiter: '.',
name: 'rameez',
cacheGroups: {}
}
},
optimizeCSS:true
}
here you can see all the CSS including my global.scss is shown as an inline style.
You are looking for extractCss property i think
build:{
extractCSS: true
}
I added this css
high {
background-color: red;
}
medium {
background-color: yellow;
}
low {
background-color: whitesmoke;
}
to wwwroot\css\Site.css, and when I publish the application with dotnet publish, I can see the minified css file is being referenced but it does not contain these new styles.
bundleconfig.json
// Configure bundling and minification for the project.
// More info at https://go.microsoft.com/fwlink/?LinkId=808241
[
{
"outputFileName": "wwwroot/css/site.min.css",
// An array of relative input file paths. Globbing patterns supported
"inputFiles": [
"wwwroot/css/site.css"
]
},
{
"outputFileName": "wwwroot/js/site.min.js",
"inputFiles": [
"wwwroot/js/site.js"
],
// Optionally specify minification options
"minify": {
"enabled": true,
"renameLocals": true
},
// Optionally generate .map file
"sourceMap": false
}
]
Why is this happening? How can I ensure that this bundle config is being applied?
I found this link useful, where it mentioned the need to add the BuildBundlerMinifier package to the project.
So after calling
dotnet add package BuildBundlerMinifier
dotnet restore
I can see my css updates in the .min.css file
I'm trying to change my sass workflow by including it in grunt and compiling from there. I can compile successfully if all my scss files are in one folder:
sass: {
dist: {
options: {
style: 'compact'
},
files: {
'style.css': 'css/*.scss'
}
}
}
however my usual file structure includes a subfolder for components exclusive to certain pages. Grunt is recognising the top level .scss files but nothing below it. I also tried this:
sass: {
dist: {
options: {
style: 'compact'
},
files: {
'style.css': 'css/main.scss',
'style.css': 'css/pages/*.scss'
}
}
}
but no joy there either. How do I compile to a single css file from multiple scss locations?
You must add /**/ after your folder, like so:
'style.css': 'css/**/*.scss'
You can see the documentation here: http://gruntjs.com/configuring-tasks#globbing-patterns
So I have started using Brackets as my IDE, and have been trying to get SASS and everything else I need to work on it. So while I was playing around, I realized I was not able to share my partial files with other partial files. Am using the "brackets-sass" extension by jasonsanjose.
My folder structure for sass is as follows,
sass
|-> includes
_config.sass
_base.sass
_reset.sass
_utilities.sass
_helpers.sass
_main.sass
style.sass
I have a bunch of variables declared in my _config.sass file, but am not able to access them in any of the other partial files. I would like to know how this would be possible, or if this feature of the extension is yet to be implemented how would I do it.
My .brackets.json file looks something like this,
{
"sass.enabled": false,
"path": {
"sass/style.sass": {
"sass.enabled": true,
"sass.options": {
"includePaths": [
"../sass/includes"
],
"outputDir": "../css/",
"imagePath": null,
"sourceComments": "map",
"outputStyle": "nested"
}
},
"sass/includes/*.sass": {
"sass.enabled": false
}
}
}
If i try to import a partial file into another, it prompts the following error,
" file to import not found or unreadable: 'includes/config' #import 'includes/config' "
and if I try to use a variable in any other partial file from _config.sass i get the following error,
" unbound variable $var_name ".
Help would be much appreciated. Thank you.
Cheers
Paths and sass.options are in wrong place, I had similar issues.
I have it working with the following preferences in brackets.json
Works with multiple entry points and include path directories.
Rather than bourbon/neat add your includes.
{
"sass.enabled": false,
"sass.options": {
"includePaths": [
"../node_modules/node-bourbon/assets/stylesheets",
"../node_modules/node-neat/assets/stylesheets"
],
"outputDir": "../css/",
"imagePath": null,
"sourceComments": false,
"outputStyle": "nested"
},
"linting.collapsed": false,
"spaceUnits": 2,
"path": {
"scss/app.scss": {
"sass.enabled": true
},
"scss/teaser.scss": {
"sass.enabled": true
}
}
}
Hope that helps!
I'm using grunt-contrib-compass, in the settings, there are options like imagesDir and imagesPath. I'm just wondering what's that for, and how do I use it?
So apparently that options to be used in conjunction with compass URL Helpers. If you've specified imagesDir in your Gruntfile.js, you can call a compass function images-url() to generate the path to your images folder.
For example, this is how you specify the Gruntfile.js:
compass: {
build: {
options: {
cssDir: './source/css/',
sassDir: './source/css/',
imagesDir: './source/images/',
force: true,
outputStyle: 'expanded',
}
}
}
And this is how you call the function from your scss file:
background-image: image-url( 'test.png' );
When you run the task, it'll be compiled into:
background-image: url('/./source/images/test.png');
Same thing applies for fontsDir, you just need to call different compass function font-url(). If you want to find more details, please follow the link http://compass-style.org/reference/compass/helpers/urls/
I'm not sure how much clearer it can get than what the docs have
[imagesDir](https://github.com/gruntjs/grunt-contrib-compass#imagesdir)
Type: String
The directory where you keep your images.
and
[imagesPath](https://github.com/gruntjs/grunt-contrib-compass#imagespath)
Type: String
Default: images
The directory where the images are kept. It is relative to the projectPath.
Maybe the definitions from Compass's configuration reference would be helpful too?
images_dir: The directory where the images are kept. It is relative to the project_path. Defaults to "images".
images_path: The full path to where images are kept. Defaults to <project_path>/<images_dir>.
You can specify these just like any other option in your Gruntfile.js:
compass: {
staging: {
options: {
imagesDir: 'images'
}
}
}
Note: these are typically used for compiling correct paths to images when you've used the compass image-url helper.