I'm using 11ty to build a static website and I'd like to use Sass. To do this I've used eleventy-plugin-sass. It does compile the Sass code into a CSS file, but it copies the input hierarchy to the output.
For example, in my input folder I have the following hierarchy:
input/
_includes/
img/
posts/
src/
scss/
partials/
main.scss
and when I run npx #11ty/eleventy it compiles into this:
output/
img/
posts/
input/
src/
scss/
main.css
index.html
I would like to have something like
output/
img/
posts/
css/
main.css
index.html
Is this possible using eleventy-plugin-sass? If not, what would be another way to achieve this?
I just released a new version (1.1.0) of eleventy-plugin-sass and there you can customize the output directory with the new parameter outputDir
Check out these. I set up the package.json scripts based on that, and it works as expected, actually, I copy here my script due some minor changes/extensions:
https://egghead.io/lessons/11ty-add-sass-compiling-and-watch-for-changes-in-eleventy-11ty
https://mvolkmann.github.io/blog/eleventy/styling-with-sass/
{
"name": "eleventy-from-start",
"version": "0.0.0",
"description": "A simple Eleventy starter",
"scripts": {
"build": "npm run sass && eleventy",
"sass": "sass src/assets/css/main.scss:_site/assets/css/main.css --load-path=node_modules",
"serve": "npm-run-all sass --parallel watch:*",
"watch:eleventy": "eleventy --serve --port=4300",
"watch:sass": "npm run sass -- --watch"
},
....
Related
in the documentation of cookiecutter-django relating to SASS Compiling and Live Reload it's stated that I only have to enter "npm start" (after installing npm of course) in the main project folder to enable Live-Reload and SASS compiling. I was wondering how this should be possible without a package.json file but tried it nevertheless, maybe some hidden thing I did not know about. But npm init of course told me that a package.json was missing. I initialized a new project with bootstrap compilation and gulp enabled, same outcome. Still no package.json. Am I missing some key-point? Or is the documentation in this case maybe incomplete? Where do I get the required package.json from? :)
In the project generation at the beginning, you probably chose "None" on the "js_task_runner" step. If you chose "Gulp" here, it will generate gulpfile.js and package.json file, after which you'll be able to use npm install.
As mentioned in other answers, when you start your project and then choose none for task runner options, it will not work. See js_task_runner on cookiecutter-django documentation.
May I ask where you tried to run npm install? The package.json file is located in the root of your app, so you have to run commands from there.
It should be possible to add the needed files afterwards manually. Create a package.json file in the root directory of your app and add following code. Important: Change name to the name of your app.
{
"name": "CHANGE_TO_NAME_OF_YOUR_APP",
"version": "0.1.0",
"dependencies": {},
"devDependencies": {
"bootstrap": "4.1.1",
"gulp-concat": "^2.6.1",
"jquery": "3.3.1",
"popper.js": "1.14.3",
"autoprefixer": "^9.4.7",
"browser-sync": "^2.14.0",
"cssnano": "^4.1.10",
"gulp": "^4.0.0",
"gulp-imagemin": "^5.0.3",
"gulp-plumber": "^1.2.1",
"gulp-postcss": "^8.0.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^4.0.2",
"gulp-uglify-es": "^1.0.4",
"pixrem": "^5.0.0"
},
"engines": {
"node": ">=8"
},
"browserslist": [
"last 2 versions"
],
"scripts": {
"dev": "gulp"
}
}
Since this project uses gulp.js as task runner you need additionally to the package.json also a gulpfile.js file. Code from this example should work. Check also if you have a scss file in name_of_your_app/static/sass/project.scss.
Now you should be able to run npm install in a first step and compile scss with npm run dev in a second step (see documentation).
My folder structure is as such:
root
|-- app1
|-- node_modules
|-- tsconfig.json
|-- ts
|-- app2
|-- node_modules
|-- tsconfig.json
|-- ts
|-- shared
|-- ts
|-- typings
|-- missing-definitions.d.ts
|-- tsconfig.json
Both app1 and app2 are separate apps with separate dependencies and builds, but they both access a few files with shared by doing something like include SharedFile from '../../shared/ts/SharedFile';. They also include missing-definitions.d.ts which defines a few modules that didn't have #types. shared contains shared code, but is not a buildable app by itself.
When building the apps, tsc works great and gives no errors/warnings. vscode also seems to work fine within app1 and app2 files. I run into issues when I open shared files in vscode. vscode can't seem to find definitions for the modules defined in missing-definitions.d.ts or for modules that exist entirely within the other app's #types despite the shared/tsconfig.json file pointing at those directories.
My question is -- how do I set up tsconfig.json in each of the folders to make vscode work? I'm a bit confused about whether I should be using baseUrl, paths, typeRoots, and/or include in each of the configs.
Here's what I have for app1/tsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"baseUrl": ".",
"paths": {
"*" : [
"node_modules/*",
"node_modules/#types/*"
]
}
},
"include": [
"./ts/**/*.ts",
"../shared/typings/**/*.d.ts"
]
}
No matter what I set for the shared/tsconfig.json, it seems that vscode doesn't read/parse it.
I'm using npm and npm link for this, which I automate with symlink to handle my nested dependencies. You don't have to actually use npm, besides using it to manage your local dependencies.
If you are OK with this approach (and at least a bit familiar with npm), you can:
Create a package.json file for each project (right next to the respective tsconfig.json files)
Add shared as a local dependency to the package.json under app1 and app2, for example:
"name": "app1",
"dependencies": {
"shared": "File:../shared"
}
Sync with symlink, executed from the root folder:
symlink ./ --execute
Set moduleResolution to "node" in your respective tsconfig.json files
This will automatically and near-instantly synchronize shared to app1 and app2. If that's not required, then neither is npm link or symlink, and you can just run npm install in your two app folders.
Note: If you omit --execute from symlink, you can see the list of commands without them being executed.
I'm trying to create a website using Jekyll, and everything worked fine. Until I wanted to custom the design.
I've updated my css/main.scss in order to include my custom theme in _sass/theme.scss:
// Import partials from `sass_dir` (defaults to `_sass`)
#import
"base",
"layout",
"syntax-highlighting",
"theme"
;
I've also updated _config.yml, because jekyll serve -H 0.0.0.0 didn't compile my new sass file. I've added the following:
sass:
sass_dir: _sass
The problem is jekyll serve doesn't compile my sass files, I always see the default css. I've also tried to copy the content of _sass/theme.scss directly at the end of css/main.scss, but nothing happened.
Until I modified one of those files while jekyll serve was running. The thing is jekyll-watch understands my updates and compile the scss files. May I have done something wrong for jekyll build don't compile sass files at the first try?
In case you need it, here my project tree:
.
├── _config.yml
├── css
│ ├── main.css
│ └── main.scss
├── _images
├── img
├── index.html
└── _sass
├── _base.scss
├── _layout.scss
├── _syntax-highlighting.scss
└── _theme.scss
Does someone know how to fix this?
Thank you,
Ok, I get it !
You have a css/main.css files that is copied as a static file in _site/css/main.css.
The problem is that it has the same name as the css/main.scss target which is also _site/css/main.css.
So at first build :
css/main.scss is processed to main.css
then, when static files are copied, it is overridden by css/main.css.
Solution : delete css/main.css
Have you added the front matter to the top of your main.scss file?
First add to your config.yml
sass:
sass_dir: _sass
Then add to top in your main.scss file, two dashed lines https://jekyllrb.com/docs/assets/
---
---
#charset "utf-8";
After that write in your cmd console
jekyll serve
and check your compilation.
I've run into similar issues when trying to use Jekyll to pass YAML content into partials. It looks like this workflow is not possible.
The work around was to place all variables on the main SCSS file and get Jekyll to populate the values from YAML, then using partials for the actual styles.
Here's a simple repo with some of my solutions: https://github.com/guschiavon/jekyllfy-sass
I am developing a browser application using a combination of the following npm build tools
Browserify
Coffeeify
Watchify
The scripts part of my package.json file is:
"scripts": {
"build": "browserify -t coffeeify init.coffee -o ../www/bundle.js",
"watch": "watchify -t coffeeify init.coffee -o ../www/bundle.js"
}
So far, I have configured my project so that before I start working on it, I enter the "npm run watch" command and all CoffeeScript files are automatically bundled into the bundle.js file whenever I update one. Now, I additionally want to have several .SCSS files that get automatically compiled into .CSS files and then all bundled and minified into a min.css file. And, ideally I want to accomplish this without having to enter commands other than then one I'm already entering for my CS files ("npm run watch").
Here are my package.json devDependencies:
"devDependencies": {
"coffee-script": "^1.10.0",
"coffeeify": "^2.0.1",
"browserify": "^12.0.1",
"watchify": "^3.6.0",
"node-sass": "^3.4.2",
"yuicompressor": "^2.4.8"
}
So far, I am at the point where I am successfully compiling my .SCSS files into .CSS files using PhpStorm's file watcher and the node-sass npm module. After some reading, I decided to use the yui compressor (it's installed as a Node module too, as you can see above). However, after a lot of searching, I couldn't find a good description of how to do this.
Am I supposed to update the:
"watch": "watchify -t coffeeify init.coffee -o ../www/bundle.js"
line in my package.json file? If so, how?
I want the final result to be such that whenever a file from the SCSS folder is changed, the min.css file in some other folder is automatically recompiled.
(I don't necessarily insist on using the yui compressor, if there is a better option for my purposes.)
I am using a css file that I import through npm. Respectively it is saved in my "/node_modules" directory.
I want to compile this file with my other scss files with elixir and am searching for a way, how to include it properly.
The options I could do is:
Rename the file from file.css to file.scss and import it in my app.scss
Copy the file.css file to my "resources/assets/" directory, rename it to scss and include it in my sass compilation like this:
Now I want to know, if there is a way to reference the file from the "node_modules" directory, without touching the file, because I want other people who download the project and use "composer install" and "npm install" to be up and running.
Or is the most common way to handle this, just to copy every required file from my "node_modules" directory to my resources/assets folder? Seems odd, since the included bootstrap file of the laravel framework is added just through an scss import in the app.scss file.
Now I want the same, but scss files can't import css files, which I have in my case, which would require for me to just rename it, which would not work out of the box on any other environment, since the "node_modules" directory is not included in version control.
Any recommendations, on what the best way is to compile css files in my "node_modules" directory?
If you look at the Elixir documentation you will notice there are many handy functions you can use. One of them is the mix.copy() function (you can copy single file or whole directory, for example whole jquery folder).
elixir(function(mix) {
mix.copy('node_modules/blabla/file.scss', 'resources/assets/sass/file.scss');
mix.sass(['file.scss', 'app.scss']);
});
This way each time you call gulp it will first copy the scss file from node_modules dir and then will compile sass.
Just add a dot before file path.
mix.scripts([
'./node_modules/autosize/src/autosize.js',
'./bower_components/jquery-tokenize/jquery.tokenize.js'
], 'public/js/app.js');
var elixir = require('laravel-elixir');
var path = require('path');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Less
| file for our application, as well as publishing vendor resources.
|
*/
function node_modules(filename) {
return path.join('../../../node_modules/', filename);
}
elixir(function (mix) {
var base = [
node_modules('bootstrap-sass/assets/javascripts/bootstrap/tooltip.js'),
node_modules('bootstrap-sass/assets/javascripts/bootstrap/collapse.js')
];
});