I would like to set my vite.config.js to build assets split into subfolders for js, CSS, and images.
Basically, I would like to have a build like this:
dist/
- index.html
- assets/
- images/
- css/
- js/
How should I change the config?
Related
I am running the pug CLI with
pug src --out web --watch
If I have
src/
index.pug
includes/
scripts.pug
web/
index.html (generated)
And in index.pug: include includes/scripts.pug
With this setup if I modify the scripts.pug, it generates web/includes/scripts.html that I don't need and I don't want in order to keep things clean.
Is there a way to avoit certain files / directories to compile?
(for now a workaround is having the includes in html form but maybe there's a way)
Adding an underscore prefix to files should tell Pug to not compile them directly. This is super helpful for files that are only used as includes.
So you should rename scripts.pug to _scripts.pug:
src/
index.pug
includes/
_scripts.pug
web/
index.html (generated)
And then rewrite your include statement in index.pug to be: include includes/_scripts.pug
The pug-cli doesn't know about not compiling certain files. Like the previous answer mentions, it does work with gulp-pug but not pug-cli. The only way I can think of not to compile includes or extends files is to put those files in a separate root directory. For example:
src/
templates/
views/
index.pug
includes/
scripts.pug
web/
index.html (generated)
Then set pug to compile the views directory only.
pug -w src/templates/views/ -o web/ -P
I'm developing a theme locally and using Gulp to run tasks. My theme directory structure looks like this:
|- theme folder/
|- app/
|- css/
|- fonts/
|- images/
|- index.html
|- js/
|- scss/
|- dist/
|- optimized files from app/
|- all other standard WP theme files and subdirs
|- gulpfile.js
|- node_modules/
|- package.json
When WordPress loads the theme, I see a blank screen, which is to be expected. WP looks for the theme files in the top-level directory of the theme folder. Is it possible to point directly to the dist folder? If it helps, I'm using Flywheel for my local dev setup.
index.php, style.css (the main stylesheet where you declare theme's metadata), header.php and footer.php need to be placed in the root of your theme's folder. Every other files (assets, includes, et cetera) can live in their own subdirectory.
For more details, please read: Organizing Theme Files | Theme Developer Handbook.
Q. How do I / is it possible to split my /SCSS directory into multiple output .css files?
I have a part of the application /admin that I don't want to serve to the standard user for performances reasons. Also, there are some standalone landing pages that are not part of the 'main' site, so could do with their own bundle.
Example SCSS structure:
/scss
- partials
- modules
Compile into:
main.css
admin.css
landing.css
Note: I'm using webpack
I am building a site that has a page titled 'CSS'. So, to me, the most logical place to store the page's index.html file is in the corresponding css/ folder.
Are there any potential problems I could run into using the css/ directory as a subpage folder as well as the place I store my css/sass like i the following directory:
siteroot
css/
index.html (sub-page I am asking about)
mainstyle.css
sass/
index.html
js/
app.js
img/
example.png
It's worth pointing out I'm not using relative URLs, so I can't see file paths being an issue.
I can use sass --watch to watch a /sass folder then output a .css file to a /css folder.
e.g. sass --watch sass:css
this creates main.css in a /css folder.
However I would like to create a file called style.css in the current directory. If I try sass --watch sass:style.css I get main.css created in a /style.css folder.
How do I generate an output file called style.css in the current directory from a /sass folder?
Have you tried: sass --watch sass:. ?