I got small problem with scss-lint, I am trying to run in a simple file and after changes in the scss-lint.yml , still not loading my config.
scss file: _headlines.scss
// Headlines
%headline-primary {
#include rem-size(60px);
color: palette(grey, light);
font-weight: $font-weight--book;
line-height: $line-height-base;
margin-top: 0;
}
scss-lint.yml
# Default application configuration that all configurations inherit from.
scss_files: "scss/**/*.scss"
plugin_directories: ['.scss-linters']
# List of gem names to load custom linters from (make sure they are already
# installed)
plugin_gems: []
# Default severity of all linters.
severity: warning
linters:
ColorKeyword:
enabled: false
ColorVariable:
enabled: false
command line used:
scss-lint scss/_headlines.scss
file sctrucute:
scss/_headlines.scss:5:1 [W] TrailingWhitespace: Line contains trailing whitespace
scss/_headlines.scss:5:18 [W] ColorKeyword: Color `grey` should be written in hexadecimal form as `#808080`
scss/_headlines.scss:5:18 [W] ColorVariable: Color literals like `grey` should only be used in variable declarations; they should be referred to via variable everywhere else.
scss/_headlines.scss:9:1 [W] FinalNewline: Files should end with a trailing newline
ColorKeyword is defined as false in my scss-lint.yml but still runing someone know what is happen?
In the scss-lint documentation, the following is specified:
Configuration
scss-lint loads configuration in the following order of precedence:
Configuration file specified via the --config flag
Configuration from .scss-lint.yml in the current working directory, if it exists
Configuration from .scss-lint.yml in the user's home directory, if it exists
All configurations extend the default configuration.
There is no .scss-lint.yml in your current working directory, scss-lint-test. Therefore, it will be using the default configuration.
To solve this, either move your YML file into scss-lint-test, or run scss-lint from the scss folder.
Related
Following these instructions I have been able to copy files from their location and into the relative output directory.
.setOutputPath('public/assets/#BUILDNUMBER#')
.copyFiles({
from: './assets/images/favicon',
})
The docs go on to explain there is an optional "to" target path which I want to be "/images/favicon" (so the whole output path would be public/assets/#BUILDNUMBER#/images/favicon) but the way I'd expect to write this out creates errors when I run webpack.
.setOutputPath('public/assets/#BUILDNUMBER#')
.copyFiles({
from: './assets/images/favicon',
to: 'images/favicon'
})
Conflict: Multiple assets emit different content to the same filename images/favicon. Original source assets/images/favicon/ms-icon-150x150.png
I'll note that currently the auto-generated #BUILDNUMBER# directory has an images subdirectory but not a favicons subdirectory, I have also tried pointing to the already existing images directory instead but it produces this error:
Error: EISDIR: illegal operation on a directory, open '/opt/my-site/public/assets/#BUILDNUMBER#/images'
So how can I set my copyFiles "to" path to point to public/assets/#BUILDNUMBER#/images or public/assets/#BUILDNUMBER#/images/favicon?
I think you're missing the placeholders in the "to" parameter.
See the error message:
Conflict: Multiple assets emit different content to the same filename images/favicon
Webpack thinks "images/favicon" is the filename.
Maybe try this:
.copyFiles({
from: './assets/images/favicon',
to: 'images/favicon/[path][name].[ext]'
})
Here's a list of supported placeholders: https://github.com/webpack-contrib/file-loader#placeholders
If you're using versioning (.enableVersioning()) e.g. you have to add the hash as well:
.copyFiles({
from: './assets/images/favicon',
to: 'images/favicon/[path][name].[hash:8].[ext]'
})
In QtCreator 4.2.0 I try to use one *.pro file for building binaries for multiple hardware configurations.
In Build & Run => Build Settings => Build Enviroment I define the enviroment variable TARGET like as follows:
Build Settings A: Variable TARGET has Value bbb
Build Settings B: Variable TARGET has Value desktop
In the pro-file I use the following test functions:
equals($$TARGET,"bbb")
{
message("setting include paths for bbb"))
message($$TARGET)
}
equals($$TARGET,"laptop")
{
message("setting include paths for laptop.")
message($$TARGET)
}
contains($$TARGET,"*bbb*")
{
message("setting include paths for bbb"))
message($$TARGET)
}
contains($$TARGET,"*laptop*")
{
message("setting include paths for laptop.")
message($$TARGET)
}
And I get this output when running qmake:
Project MESSAGE: setting include paths for bbb
Project MESSAGE: bbb
Project MESSAGE: setting include paths for laptop.
Project MESSAGE: bbb
Project MESSAGE: setting include paths for bbb
Project MESSAGE: bbb
Project MESSAGE: setting include paths for laptop.
Project MESSAGE: bbb
Project MESSAGE: setting include paths for bbb
This makes no sense to me an I can't figure what I'm doing wrong here. Why are the parts after testing fro laptop executed?
By the way, I solved my problem by using Scopes. This works perfect for me:
CONFIG += $$(TARGET_HW)
desktop {
message("setting include paths for laptop.")
}
cetec {
message("setting include paths for cetec."))
}
But I'm still interested in the correct way of using test functions.
I provide the correct syntax for the first test, as an example:
equals(TARGET,"bbb") {
message("setting include paths for bbb"))
message($$TARGET)
}
Please notice:
The curly brace is on the same line of the test.
The variable tested has no dollar signs, just the variable name
The opening brace must written on the same line as the condition (https://doc.qt.io/qt-5/qmake-language.html#scope-syntax).
There are so many issues in your question, that there is place for another answer, adding to the previous correct ones:
as #daru says, you need to open the brace in the same line as the test function.
as #p-a-o-l-o says, contains and equals syntax require variable names as first arguments, without $$.
TARGET is an internal variable, that contains the base name of the project file by default. It becomes the name of the executable or library you are building.
You may use an environment variable named TARGET, but then you should assign it to a qmake variable name with another name.
sample code:
TGT=$$(TARGET)
equals(TGT,"bbb") {
message("$$TGT equals bbb"))
message(TGT=$$TGT)
}
equals(TGT,"laptop") {
message("$$TGT equals laptop")
message(TGT=$$TGT)
}
contains(TGT,"bbb") {
message("$$TGT contains bbb"))
message(TGT=$$TGT)
}
contains(TGT,"top") {
message("$$TGT contains top")
message(TGT=$$TGT)
}
When I run lessc --source-map=styles.map assets/less/00_style.less dest/assets/prod.css in the command line, everything is working. The styles.map file ends in:
...AV2rEF;EAAiB,aAAA","file":"dest/assets/prod.css"}
However, when I run grunt less, the styles.map is missing the "file" part and just ends in:
...AV2rEF;EAAiB,aAAA"}
This stops the SourceMap from working. What could be going wrong? My less config is as follows:
less: {
dist: {
options: {
sourceMap: true,
sourceMapFilename: 'styles.map'
},
files: [{
src : 'assets/less/00_style.less',
dest: 'dest/assets/prod.css'
}]
}
}
Short answer:
Add the following additional option to your less Task in Gruntfile.js:
...
options: {
...
sourceMapURL: '../../styles.map'
},
...
Long answer:
When running the lessc command via the CLI, (as per your example), notice the the following comment is written to the resultant prod.css:
/*# sourceMappingURL=../../styles.map */
However, when running the grunt task, (using your current config), the following comment is written into the resultant prod.css:
/*# sourceMappingURL=styles.map */
Note the missing ../../ - therefore prod.css can't find styles.map
This is why your SourceMap isn't working and not so much to do with the "file:" missing in styles.map when run via grunt. The .css file ultimately points to the .map file - not vice versa.
Even after running the lessc command via the CLI then deleting the "file:" part from styles.map you will find that the SourceMap still works in the browser. Indicating that the "file:" part, whether included in the .map file or not, has no effect on preventing the SourceMap from working.
Besides, as noted in the most recent proposed SourceMap spec (v.3) the "file:" part is optional:
Line 3: An optional name of the generated code that this source map is associated with.
Explicitly defining the sourceMapURL in your grunt Task options will entail having to keep a flat folder structure inside the dest/assets/ directory if you intend on using multiple .less files. (I.e. You'll need to avoid saving any resultant .css files in subfolders)
I have a sasslint.yml file with a a list of rules
One of them is
property-sort-order: 1
I have tried to exclude it with
property-sort-order: enabled:false
and with
scss-lint --exclude-linter PropertySortOrder
But all this unsuccessful.
Any ideas?
Many thanks
You configure scss-lint in yml a configuration file. The default is .scss-lint.yml, and you can specify a different file via the command line with --config (I think -c works too). The documentation covers this here: https://github.com/brigade/scss-lint#configuration
You disable a linter with
linters:
LinterName:
enabled: false
Judging by https://github.com/brigade/scss-lint/issues/132,
linters:
PropertySortOrder:
enabled: false
will work correctly.
If you'd actually rather not turn it off completely, configuration options for scss-lint's property-sort-order are documented here https://github.com/brigade/scss-lint/blob/master/lib/scss_lint/linter/README.md#propertysortorder
How can I compile a LESS file to output a source map file (.css.map) in addition to a CSS file? Is there a way to do it on both command line (NodeJS's lessc) and on any GUI-based programs?
Update: New shortest answer
The docs have been updated! As new features hit LESS, sometimes the docs lag behind a bit, so if you're looking for bleeding-edge features, you're still probably better off running lessc (see longer answer) and checking what pops out of the help text.
http://lesscss.org/usage/
Short answer
You're looking for any number of the following options from the command line:
--source-map[=FILENAME] Outputs a v3 sourcemap to the filename (or output filename.map)
--source-map-rootpath=X adds this path onto the sourcemap filename and less file paths
--source-map-basepath=X Sets sourcemap base path, defaults to current working directory.
--source-map-less-inline puts the less files into the map instead of referencing them
--source-map-map-inline puts the map (and any less files) into the output css file
--source-map-url=URL the complete url and filename put in the less file
As I write this I'm not aware of any GUI options that generate maps (source maps were only added to LESS in the last few months) -- sorry to not have any better news. I'm sure they'll add support in as they update over the next year.
Longer answer
If you run lessc from the command line without any parameters it will give you all the options. (In my experience, this is more up to date than their documentation, so it'll at least get you pointed in the right direction.) with all the most recent map stuff included.
The easiest combo to use for dev is --source-map-less-inline --source-map-map-inline as that will give you your source maps embedded in your output css.
If you'd like to add a separate map file, you can use --source-map which, from my.less will output my.css and my.css.map
For reference: when I run my copy (v 1.6.1 at the moment) I get
usage: lessc [option option=parameter ...] <source> [destination]
If source is set to `-' (dash or hyphen-minus), input is read from stdin.
options:
-h, --help Print help (this message) and exit.
--include-path=PATHS Set include paths. Separated by `:'. Use `;' on Windows.
-M, --depends Output a makefile import dependency list to stdout
--no-color Disable colorized output.
--no-ie-compat Disable IE compatibility checks.
--no-js Disable JavaScript in less files
-l, --lint Syntax check only (lint).
-s, --silent Suppress output of error messages.
--strict-imports Force evaluation of imports.
--insecure Allow imports from insecure https hosts.
-v, --version Print version number and exit.
-x, --compress Compress output by removing some whitespaces.
--clean-css Compress output using clean-css
--clean-option=opt:val Pass an option to clean css, using CLI arguments from
https://github.com/GoalSmashers/clean-css e.g.
--clean-option=--selectors-merge-mode:ie8
and to switch on advanced use --clean-option=--advanced
--source-map[=FILENAME] Outputs a v3 sourcemap to the filename (or output filename.map)
--source-map-rootpath=X adds this path onto the sourcemap filename and less file paths
--source-map-basepath=X Sets sourcemap base path, defaults to current working directory.
--source-map-less-inline puts the less files into the map instead of referencing them
--source-map-map-inline puts the map (and any less files) into the output css file
--source-map-url=URL the complete url and filename put in the less file
-rp, --rootpath=URL Set rootpath for url rewriting in relative imports and urls.
Works with or without the relative-urls option.
-ru, --relative-urls re-write relative urls to the base less file.
-sm=on|off Turn on or off strict math, where in strict mode, math
--strict-math=on|off requires brackets. This option may default to on and then
be removed in the future.
-su=on|off Allow mixed units, e.g. 1px+1em or 1px*1px which have units
--strict-units=on|off that cannot be represented.
--global-var='VAR=VALUE' Defines a variable that can be referenced by the file.
--modify-var='VAR=VALUE' Modifies a variable already declared in the file.
-------------------------- Deprecated ----------------
-O0, -O1, -O2 Set the parser's optimization level. The lower
the number, the less nodes it will create in the
tree. This could matter for debugging, or if you
want to access the individual nodes in the tree.
--line-numbers=TYPE Outputs filename and line numbers.
TYPE can be either 'comments', which will output
the debug info within comments, 'mediaquery'
that will output the information within a fake
media query which is compatible with the SASS
format, and 'all' which will do both.
--verbose Be verbose.
If the command line doesn't suite you, Grunt is great at this type of thing. You can configure the grunt-contrib-less plugin to generate inline maps with a config like this:
less: {
options: {
sourceMap:true,
outputSourceFiles: true
},
lessFiles: {
expand: true,
flatten:false,
src: ['**/*.less'],
dest: ['dist/'],
ext: '.css',
}
},
https://github.com/gruntjs/grunt-contrib-less
Example to Create Map and CSS file from Less File
Install latest Node JS and go to command prompt and run npm install less, Now less installed successfully
Go to Command Prompt and move to less file folder that we are going to create
For e.g., I am going to change HelloWorld [Less File]
In Command prompt go to C:\Project\CSS or give the correct path in the below command.
Run following Command in Command Prompt
lessc HelloWorld.less HelloWorld.css --source-map=HelloWorld.css.map –verbose
Now CSS and Map file is generated in the respective folder.
For more reference check the link : royalarun.blogspot.com