I am trying to set up a SCSS transpiler in PyCharm for Django project.
Basically, what I need is to convert /static/scss/main.scss to /static/css/main.css
Here are the configurations of SCSS File Watcher:
Program: /home/maverick/.rvm/gems/ruby-2.2.3/bin/scss
Arguments: --no-cache --update /home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
Working directory: /home/maverick/Documents/DjangoProjects/timberg/static/scss
Output paths to refresh: /home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
What is happening is that main.css is being generated where it should. But it contains only errors, not the expected css, like this:
/*
Error: Inconsistent indentation: 2 spaces were used for indentation, but the rest of the document was indented using 8 spaces.
on line 39 of /home/maverick/Documents/DjangoProjects/timberg/static/css/main.css
and etc.
What is wrong here? How can I fix it?
The problem was in the Arguments part.
It should be:
$FileName$:/home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
not just:
/home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
My mistake was leaving out $FileName$: at the beginning.
Related
I get the following error when running next build:
HookWebpackError: Expected a pseudo-class or pseudo-element.
at makeWebpackError (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/webpack/bundle5.js:28:308185)
at /Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/webpack/bundle5.js:28:105236
at eval (eval at create (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/webpack/bundle5.js:13:28771), <anonymous>:34:1)
-- inner error --
Error: Expected a pseudo-class or pseudo-element.
at /Users/eliot/Developer/eliothertenstein.com/static/css/66780ddc5f37cb3b.css:906:3
at Root._error (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:78465)
at Root.error (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:124360)
at Parser.error (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:86811)
at Parser.expected (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:93145)
at Parser.pseudo (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:89313)
at Parser.parse (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:92668)
at Parser.loop (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:92233)
at new Parser (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:78322)
at Processor._root (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:95242)
at Processor._runSync (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:95749)
caused by plugins in Compilation.hooks.processAssets
(See the full error at https://pastebin.com/JLQ2aR2f)
I've been trying to debug this issue for ~3hrs, and it's driving me crazy. I would appreciate any help on how I could better debug the next build command? I tried using the --debug flag, but it didn't seem to do anything.
So far I know this is an issue with tailwindcss (I assume postcss), as when I remove that section of my global.scss the program works again (or actually after I comment out the full file EXCEPT for tailwind it still breaks, commenting out tailwind leads to other issues).
Oh, some other debugging I've tried:
Searching through my entire project w/ regex to find any invliad tailwind classes (using (["'])(.*\b\w+: )(.*)(\1) to locate classes like md: text-red-600 but not md:text-red-600)
reinstalled all node_modules
commenting out all CSS files (which stops the issue!)
used both yarn classic and node to run the command (and npx) as opposed to yarn v3 which is what I currently use for development
Any help is appreciated!
It turns out the answer was an error in tailwind.config.js. One of my keyframes looked like this:
expand: {
...
'80%:': {
opacity: 0.5,
},
...
},
Notice the double colon after 80%.
I would encourage everyone with this issue to check classNames, .css files, and also tailwind.config.js for any extra colons.
I have a variable file in scss and import it with Symfony encore for my scss and sass files (see the code below).
// enables Sass/SCSS support
Encore.enableSassLoader((options) => {
options.implementation = require('sass')
options.additionalData = `#import "#/scss/variables.scss"`
});
The problem is there are sass (node-module(s)) and scss (template) files in my project which needs them.
If I run it like the snippet above it went fine for the sass files, but the scss files give an error: 'SassError: expected ";" after the #import line in the additionalData'.
However if I add the ; after the import line I get an error from the sass files 'SassError: semicolons aren't allowed in the indented syntax.'.
It's probably a small issue which I miss but I have no clue at the moment. I tried it with the added parameter indentedSyntax with true and false in the sassOptions but this was no success.
Anyone have an idea?
With kind regards
My .jshintignore file looks like this:
node_modules/**
coverage/**
public/js/lib/**
doc/**
plato/**
The first 2 lines work well to ignore everything under node_modules/ and coverage/
However the next 3 lines are not respected by jshint and files from those 3 directories are being included in the jshint analyses...
You could try...
node_modules/**/*
coverage/**/*
public/js/lib/**/*
doc/**/*
plato/**/*
I think it should then ignore files recursively below the directory that you specify
Have you tried removing /**?
node_modules
coverage
public/js/lib
doc
plato
That way it should ignore those directories, effectively ignoring everything else inside them.
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
Is it possible to automatically add a timestamp on the compiled CSS file using SASS?
e.g.
/* CSS Compiled on: {date+time} */
...compiled css goes here...
I've checked the SASS and Compass docs but no mention of such a feature.
I don't know of any built-in SASS or Compass feature for this, but it's not too hard to add a custom Ruby function to do it. (See the section entitled "Adding Custom Functions" in the SASS reference here.)
Your file with the Ruby function would look like this (let's call it "timestamp.rb"):
module Sass::Script::Functions
def timestamp()
return Sass::Script::String.new(Time.now.to_s)
end
end
And you'd reference the new timestamp function in your SASS file like this:
/*!
* CSS Compiled on: #{timestamp()}
*/
You just need to make sure your "timestamp.rb" file is loaded when you compile the SASS, either by requiring it from a Compass config file, or by using the --require parameter with the SASS command line. When all is said and done, you should get output like the following:
/*
* CSS Compiled on: 2012-10-23 08:53:03 -0400
*/
If you are using the command line version of SCSS you can do the following:
Install sass-timestamp
gem install sass-timestamp
Use it within your code like (see documentation for more information)
/* Compiled on #{timestamp()} */
Require it on the command line
scss -r sass-timestamp ...
Output will be
/* Compiled on 2015-02-02 13:01:40 +0800 */
Note: Use #{unix_timestamp()} for a unix timestamp
I don't know if everyone needs it (cause the question is a long time answered ago),
but a simple solution is to write the timestamp/date
to a single sass/scss file as SASS variable,
import them to the location where the timestamp should be
and then let a comment in sass write them out.
Nothing to install, compile or anything else - just using scripts and sass:
1.) Write the timestamp to a separate sass file: (Here a dos-script, but you can also use any other script/language to generate the simple file):
echo $BuildTimeStamp : "%date% %time%"> _timestamp.scss
2.) Import the generated file with the timestamp:
#import '_timestamp.scss';
3.) Write the header out as comment:
/*! Automatic build at: #{$BuildTimeStamp} */
Write the timestamp before you call the original sass command
and it will also work without the need to install, build or do anything else.