I'm trying to find a way to compile my multiple scss files into one css file.
scripts are in package.json using node-sass
The best I've found for the moment is : sass --watch .assets/css/scss/:assets/css
The problem is it creates one css file for each scss file plus a css map file.
I was previously working without watch node-sass --include-path scss .assets/css/scss/style.scss assets/css/style.css but had to run the command at each save.
Using sass --watch .assets/css/scss/style.scss:assets/css/style.css with style.scss like this :
#import 'test1.scss';
#import 'test2.scss'
is not working but console say :
Compiled style.scss to style.css.
Compiled test1.scss to test1.css
Am i missing something?
EDIT : for some reasons, running only sass without node on a subsystem linux is causing some blue screen. Using node-sass --watch ./assets/css/scss/style.scss:assets/css/style.css or node-sass --watch ./assets/css/scss:assets/css return a npm error : code ELIFECYCLE errno 1
I've tried different solutions and the one that worked for what i wanted was that one : Using node sass watch with npm
Had the remove the dependencies and the directory bacause i have to write on only one file.
have to run this one to make it work
"css-watch: node-sass --include-path scss ./assets/css/scss/style.scss -w /assets/css/style.css"
including files in the style.scss without _ in the name is working fine with a simple import and detect all updates in the imported files.
Given the following directory structure
root
|- src
| |- collect
| | |-collect.scss
| |- pack-a
| | |-a.scss
| |- pack-b
| | |-b.scss
|- build (generated)
| |- collect
| | |-collect.css
| |- pack-a
| | |-a.css
| |- pack-b
| | |-b.css
and collect.css with the following content
// ./src/collect/collect.scss
#import "../pack-a/a.scss";
#import "../pack-b/b.scss";
(i) run sass ./src/collect:./bld/collect to generate ./bld/collect/collect.css
(ii) run sass ./src:./bld to generate all
All your SASS partials should be renamed to begin with an underscore character: _.
From the SASS Basics guide:
A partial is a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file.
You can continue to import the partial files into your main styles.scss file the same way, using their normal names and omitting the underscore character. You can also omit the '.scss' if you'd like. To follow the new SASS syntax version you should be using #use to import partial SASS files as a module, rather than #import.
Then you just transpile that main build file and it should work fine.
Related
Is there something fast to change all project .styl (stylus) file to scss or css ? Like console command or something ? Because I have to edit project which styles are in .styl and It's really confusing.. Who does that nowadays ?
Run:
1) ng config defaults.styleExt=scss
2) Rename your existing .css/stylus files to .scss
Not sure if still relevant, but using the following script you can rename all .styl files to .scss (adjust accordingly for ./css)
##!/bin/bash
for file in $(find ./src -type f -name "*.styl");
do
echo "$file";
mv -- "$file" "${file%.styl}.scss"
done
The hectic part is to make sure that all the stylus syntax is changed to match sass syntax.
Hope this helps
For example compiling this folder structure,
x.styl
|--abc/
|--|--a.styl
|--efg/
|--|--b.styl
To
build/
|--x.css
|--abc/
|--|--a.css
|--efg/
|--|--b.css
Using stylus compiler (compiling styl files from a folder and its subfolders)
You can use the --out parameter on building and target a whole folder, it will keep your structure, first you can target a file or folder, and after out the folder or filename you want to have your compiled css
stylus -c ./project/stylus --out ./myfolder/css
For:
|stylus
|--abc/
|--|--a.styl
|--efg/
|--|--b.styl
It would result in something like:
|css
|--abc/
|--|--a.css
|--efg/
|--|--b.css
A bit late on this, and I hope that might help others like it help me, but I found a solution using the package stylus-chokidar.
stylus-chokidar
Just slightly modified stylus CLI, that builds files list recursively and watches > them with chokidar (if --watch provided).
Recursion are always enabled, glob patterns not supported.
With this you can have the stylus files compiled in-place recursively (each component will store their own CSS/stylus files).
I am late on the game, but I believe I have a solution that is not optimal, but workable for your situation.
per your example, keep the same file/folder structure
x.styl
|--abc/
|--|--a.styl
|--efg/
|--|--b.styl
but also include a "combination.styl" file in its own separate folder. So now you have:
x.styl
|--abc/
|--|--a.styl
|--efg/
|--|--b.styl
|--all-stylus/
|--|--combination.styl
inside of combination.styl you should import all of the separate .styl files, so for our example
// combination.styl
#import '../x.styl'
#import '../abc/a.styl'
//etc...
then you can output one large css file wherever you would like!
the command to run this would simply be:
stylus ./stylus -out ./css
I know it doesn't give you the output file/folder structure you were looking for, but I imagine it is helpful to be able to compile all of your stylus into css at one time!
I have a bunch of files in bunch of folders in SCSS format. I need to convert it all to SASS format, and I know sass has a specific command for that convert-sass, however I am not sure whether it is possible to convert whole folder (with folders inside)?
If its possible, then how convert-sass, else maybe there is a compiler who is able to do that? Thank you upfront:)
Yes, sass-convert accepts a recursive argument.
If you run sass-convert --help, it will give you a list of available options. One of them is:
-R, --recursive Convert all the files in a directory. Requires --from and --to.
So, your command should look like this:
sass-convert -R my_sass_dir --from sass --to scss
Here's a slighly more extensive answer:
go to your project subfolder, under which all your styles sit (also, because you want to leave node_modules alone, do you?)
cd frontend/src
convert in place, as said (consider --indent 4 if that's your indentation style...)
sass-convert -R . --from scss --to sass --in-place
you almost certainly want to rename all those .scss files to .sass (details)
find . -name '*.scss' -exec sh -c 'mv "$0" "${0%.scss}.sass"'
In your .js or .jsx files, you want to adjust your import statements.
find . -name '*.jsx' -print0 | xargs -0 sed -i "s/'\.\(.*\)\.scss'/'.\1.sass'/g"
More specifically, only your local import statements, starting with a '.', not your global imports, i.e. pointing to node_modules… right?
Testcase:
import './style.scss' // should change to .sass
import './bar.scss' // should change to .sass
import 'slick-carousel/slick/slick.scss' // leave me alone!
Remaining pitfalls are:
Your webpack.configs (loaders!), grunt or gulpfile, still matching against .sass
global ‘common’ imports which you might prepend…
As a follow up to this question, there is one more case I haven't been able to figure out in a few hours of tinkering.
Here is what the makefile currently looks like:
output = $(shell find lib -type f -name '*build.js' -or -name '*build.css')
myth = ./node_modules/.bin/myth
duo = ./node_modules/.bin/duo
build: $(output)
%/build/build.js: %/index.js %/lib/*.js node_modules component.json
#mkdir -p '$(#D)'
#$(duo) '$*'/index.js > '$#'
%/build/build.css: %/index.css %/lib/*.css node_modules component.json
#mkdir -p '$(#D)'
#$(duo) '$*'/index.css | $(myth) > '$#'
node_modules: package.json
#n 0.11.13
#npm install
#touch node_modules # make sure folder is updated later than package.json
The piece that I have added on top of the great answer in that other question is the %/lib/*.js and %/lib/*.css right here:
%/build/build.js: %/index.js %/lib/*.js node_modules component.json
That seems to work fine if you have all the required files, meaning the directory structure looks like this:
component.json
lib/
lib/page/
lib/page/build/
lib/page/build/build.js
lib/page/index.js
lib/page/lib/
lib/page/lib/a.js
lib/page/lib/b.js
lib/popup/
lib/popup/build/
lib/popup/build/build.js
lib/popup/index.js
lib/popup/lib/
lib/popup/lib/a.js
lib/popup/lib/b.js
node_modules/
package.json
With that current make task, it rebuilds the proper subproject/folder (page/popup/etc.) if you change a file inside that folder. However, it doesn't rebuild if you are missing one of the dependencies.
For example, in the following folder structure, the "popup" subproject will build fine (because it still has all the required target dependencies). However, the "page" subproject won't ever build, because it is missing any %/lib/*.js files:
component.json
lib/
lib/page/
lib/page/build/
lib/page/build/build.js
lib/page/index.js
lib/popup/
lib/popup/build/
lib/popup/build/build.js
lib/popup/index.js
lib/popup/lib/
lib/popup/lib/a.js
lib/popup/lib/b.js
node_modules/
package.json
So, in this situation, the only way it will build is if you have both an %/index.js and some file matching %/lib/*.js.
My question is, how do you make it work for both cases?
Essentially all I want is to rebuild a subproject if any of the files except ones in build/build.js change. That is, if any file has changed that doesn't match the target name, then run the task.
How do you do this?
I have tried this:
%/build/build.js: %/**/*.js node_modules component.json
But that errors out with this:
make: Circular lib/page/build/build.js <- lib/page/build/build.js dependency dropped.
Because it matches the target name.
It also seems like it might be possible to use $(filter pattern, text) or $(filter-out, pattern, text), but I haven't been successful with those.
%/build/build.js: $(filter-out %/build/build.js, %/**/*.js) node_modules component.json
That seemed like it might include all files matching %/**/*.js (so lib/page/index.js, and lib/page/lib/a.js if that was present), and just exclude lib/page/build/build.js. But, I haven't had any luck with that, maybe I'm just using it incorrectly.
How do you get this to work?
After watching Chris Coyer's
http://www.youtube.com/watch?v=M7W5unPM_b4&list=UUADyUOnhyEoQqrw_RrsGleA
I was wondering - is it possible to autorun Autoprefixer Sublime plugin right after the CSS file is built and without Grunt? What would I need to configure in Sublime and how?
Ideal chain would be:
Build compressed "style-unprefixed.css" on SASS save - run Autoprefixer - create compressed "style.css"
I'm no expert, but I think I just figured out how to do this, via a shell script.
Prerequisites:
SublimeOnSaveBuild (ST2 Plugin, also works on ST3)
SASS compiler (I'm using LibSass/SassC)
Autoprefixer (not the ST plugin)
After all that is taken care of, we'll create the script. For our purposes, let's call it buildcss.sh:
#!/bin/bash
if [ $# == 0 ]
then
echo "Usage: buildcss.sh [scss file] [css file]"
exit
fi
# Create the css file ($2) from a scss file ($1)
# see "sassc -h" for additional options
sassc $1 $2
# Run autoprefixer, overwrite input .css file
# see "autoprefixer -h" for additional options
autoprefixer -b "> 1%" $2
Of course if you're using Ruby SASS (sass) instead of sassc, the script should be adjusted.
Okay, at this step you should be able to run something like ./buildcss.sh style.scss style.css to test and make sure that part works. Then it's just a matter of making Sublime Text run that and pass the correct arguments.
For that, create a custom build system. Tools > Build System > New Build System... in ST3. There may be some differences between ST2 and ST3 here, but in ST3 my configuration looks like:
{
"shell_cmd": "/path/to/script/buildcss.sh $file ${file_path/scss/css/}/${file_base_name}.css",
"selector": "source.scss",
"line_regex": "Line ([0-9]+):",
}
As you may notice, I'm exclusively setting up for scss, but if you need sass you could set up another similar build system, exchanging "sass" for "scss" throughout. This build system also assumes that you keep your files in a /scss subfolder, and that css files should go in a /css subfolder at the same level.
And there you have it! Whenever you save a .scss file, SublimeOnSaveBuild will do it's magic and fire our custom build, which will in turn call the script which calls sassc and autoprefixer.