I'm trying to get this Grunt plugin to work:
https://npmjs.org/package/dss
This documentation plugin ironically seems to be lacking proper documentation. Can someone help me out by giving me an example of something that worked for them. The main thing that's screwing me up is the "your_target" property. Not sure what's suppose to go in there.
Say I have a SASS file in the following path from the root directory:
sass/main.scss
What would my ouput be by default? And where would it output to? Also what format does it ouput to?
grunt.initConfig({
DSS: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
})
Is "your_target" property the path to my sass file or the path to the documentation file I'm trying to create? Would it be defined like this?
...
your_target: {
// Target-specific file lists and/or options go here.
sass: "sass/main.scss"
},
...
I don't know what the property name should be. :(
dss: {
docs: {
options: {
},
files: {
'api/': 'css/**/*.{css,scss,sass,less,styl}'
}
}
}
Related
I'm trying to figure out a solution to wrap text around images within a markdown document using Gatsby. I have tried the wrapperStyle option but not entirely sure how to get it to work. I've seen on Gatsby's website using the following code:
wrapperStyle: fluidResult => `flex:${_.round(fluidResult.aspectRatio, 2)};`,
But I am very novice to coding and am unsure how to read this (I'm a technical writer by trade). Also, adding this makes my images disappear when I build the repo.
Here is a condensed snippet from my gatsby-config.js file in case someone is unsure of where I'm talking about in gatsby-config.js.
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 800,
},
I think you are looking for showCaptions or markdownCaptions option of gatsby-remark-images plugin. Use it like:
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: 'gatsby-remark-images',
options: {
showCaptions: true
}
}
]
}
}
Or customize the element of the caption like:
{
resolve: 'gatsby-remark-images',
options: {
showCaptions: ['title', 'alt']
}
}
}
Note: with this configuration, if you set the title, it will be used as the caption. Otherwise, if you set the alt attribute, it will be used instead
You can find the result of the configuration in this GitHub thread:
Related articles:
https://medium.com/#sgpropguide/customising-image-display-in-gatsby-3b027d783dce
https://codeconcisely.com/posts/how-to-add-markdown-image-captions-in-gatsby/
I've started working on an existing website at work that uses Sass and auto-prefixer with Grunt. I'm not 100% familiar with the files yet, but I don't want to change the structure to avoid breaking anything. The problem I'm having is that no matter what .scss files I edit, it doesn't affect the required .css file. The developers that originally built the site aren't here anymore.
The changes I make either affect file.css or file2.css, and I need to reach file.expanded.css, but there's no mention of this file in the Gruntfile, so it was either removed, or it's being compiled in another way. Obviously, I'm avoiding editing it directly. I'm just unsure if I have enough to figure this out.
In case it helps, here's the Gruntfile:
module.exports = function(grunt){
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
build: {
files: {
'assets/css/file2.css': 'assets/sass/folder/file2.sass'
}
}
},
autoprefixer: {
build: {
src: 'assets/css/file.css',
dest: 'assets/css/file.css'
}
},
watch: {
css: {
files: ['assets/sass/**'],
tasks: ['buildcss']
}
},
// Browsersync
browserSync: {
dev: {
bsFiles: {
src: [
'assets/css/*.css',
'assets/images/*',
'assets/scripts/*.js',
'**/*.html'
]
},
options: {
watchTask: true,
proxy: "site.dev:8888",
}
}
},
});
grunt.registerTask('default', ['browserSync', 'watch']);
grunt.registerTask('buildcss', ['sass', 'autoprefixer']);
};
You should install a Grunt task for source maps and recompile your CSS. I personally use Gulp so, I'm unsure what the best solution for Grunt might be, but it's a similar set up. When your CSS is compiled with source maps, you'll be able to pinpoint with your inspector where in which partial or SASS file the style declarations are coming from.
http://thesassway.com/intermediate/using-source-maps-with-sass
I'm used to working with Makefiles but my current project uses .qbs files. How do I run a simple terminal command through qbs without creating or requiring files? Similar to a phony rule in make.
The following works and shows "awesome" in my terminal.
import qbs 1.0
Project {
name: "cli"
Product {
name: "helloworld"
type: "application"
files: "TEST.c"
Depends { name: "cpp" }
}
Product {
type: ["custom-image"]
Depends { name: "helloworld" }
Rule {
inputsFromDependencies: ["application"]
Artifact {
fileTags: ["custom-image"]
}
prepare: {
var cmd = new Command("echo", "awesome")
return cmd
}
}
}
}
However I have to touch my dummy TEST.c file before each run. Without the helloworld dependency the Rule does not run.
Any ideas? Thank you very much!
It's buried in the documentation in a very non obvious place and further obscured by Command (which is not the correct way, lol). I've had your problem too.
What you need is this:
http://doc.qt.io/qbs/jsextension-process.html
I'm not sure what your end goal is but you could use Transformer{} instead of a Rule{}. The biggest difference between a Rule{} and a Transformer{} is you don't need any inputs for the Transformer{} to run.
Also see Transformer.alwaysRun property.
https://doc.qt.io/qbs/transformer-item.html
I'm trying to learn how to silence a rule in SublimeLinter-scss-lint (specifically EmptyLineBetweenBlocks).
For SublimeLinter-csslint, I can run scss-lint --list-rules in Terminal, locate the rule I don't like in the output, and add it to the ignore array in SublimeLinter.sublime-settings (as below).
{
"user": {
// ...
"linters": {
"csslint": {
// ...
"ignore": [
// Following rules will be ignored.
"adjoining-classes",
"box-model",
"box-sizing",
"fallback-colors",
"ids",
"universal-selector"
],
// ...
},
// ...
}
}
}
For SCSS, there doesn't appear to be a similar way to find rule names in Terminal, and there's no scss-lint object in Sublime Linter settings. So…how is this done?
Thank you.
Here's a way I found to make it work.
I created a file in my Home directory (~/) named .scss-lint.yml.
In it, I copy–pasted rules I wanted to modify from the default.yml file located in/Library/Ruby/Gems/2.0.0/gems/scss_lint-0.39.0/config/, preserving indentation.
Close and re-open any SCSS files in Sublime to see the changes.
Example:
linters:
EmptyLineBetweenBlocks:
enabled: false
LeadingZero:
enabled: true
style: include_zero
MergeableSelector:
force_nesting: false
I'm brand new to Grunt.js, but I'm starting to get the hang of it. The main thing I'd like to do with it however, I can't seem to nail down.
My goal here, is to point grunt at a directory, and have it watch all of the matching files, and upon changes, compile them into a new single CSS file.
Here's my current gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// CONFIG =========================/
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'assets/css/style.css' : 'assets/css/sass/*.scss'
}
}
},
watch: {
css: {
files: 'assets/css/sass/*.scss',
tasks: ['sass']
}
}
});
// DEPENDENT PLUGINS =========================/
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
// TASKS =====================================/
grunt.registerTask('default', ['watch']);
};
Thus far I've been using grunt-contrib-watch, and grunt-contrib-sass. I've tried compass, as well as directory import but I couldn't get either of them to do what I'm trying to do either.
At the end of the day, I'm really just trying to avoid writing an import file, both because source order isn't going to matter for the way I'm writing my SASS, and becuase I'd really like to know how to make this happen.
I'm not sure of a way to do exactly what you want to achieve by just using Sass and Grunt-Contrib-Sass but you can achieve something similar by using Sass-Globbing, a SASS plug-in that lets you import entire directories. To use the plug-in, you'd use the require option in Grunt-Contrib-Sass and you'd have it target a main styles.scss file that may look something like:
#import "vendor/*";
#import "modules/*";
#import "partials/*";
And then your grunt file would have something like:
sass: {
dist: {
options: {
require: 'sass-globbing'
},
files: {
'assets/css/style.css' : 'assets/css/sass/style.scss'
}
}
}