Currently I'm converting the project from using Symfony Webpack Encore to ViteJs, I was using a Webpack loader called webfonts-loader to convert SVG to Webfont, is there any plugin for ViteJs to convert SVG to Webfont?
Use svg files to build iconfont files(ttf,woff2,woff,eot,svg), css file, js data file and html-preview file.
https://github.com/daipeng7/rollup-plugin-iconfont
Related
When i compile my sass file with the plugin live sass compiler, like this is my .scss file
#import "./node_modules/bootstrap/scss/bootstrap.scss";
and then after the compile it creates two files one .css and other .css.map, in the .css file it just show me this in comment bars:
/* No CSS *//*# sourceMappingURL=styles.css.map */
i'm trying to compile this to use bootstrap in my project
While webpack seems to support a wide variety of detailed configuration options, I only want to accomplish the simple task of taking a single css source file located at project/frontend/static/css/style.css and outputting a minified version of that css file to project/frontend/static/css/style.min.css. I can't seem to find anything in the documentation of webpack that discusses this, as I am not importing my CSS from JS, just linking it in the HTML head the old fashioned way, so all I want to output is a plain CSS file, just minified.
With webpack you may like to use mini-css-extract-plugin
npm install --save-dev mini-css-extract-plugin
This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.
It builds on top of a new webpack v4 feature (module types) and requires webpack 4 to work.
Please look at the documentation for more info
https://webpack.js.org/plugins/mini-css-extract-plugin/
How should I correctly use materialize Sass in a react project created with create-react-app? Where should I keep the scss and js files?
I suppose if I use sass, I'm not supposed to be importing minified css and js files in my index.html?
3 easy steps and you're set!
install node-sass (npm install node-sass)
if your materialize file is .css, change it to .scss
import it! (import "./materialize.scss";)
more info: https://scotch.io/tutorials/using-sass-in-create-react-app-v2
Here is an article that discusses creating a custom css build and importing javascript on a per-component basis:
https://medium.com/#mattdlockyer/youre-using-materialize-css-wrong-470b593e78e9
I'm on a Symfony 4 new project.
Via yarn, I installed (by example) the CSS library animate.css
yarn install animate.css
From the webpack.config.js file, I added the animate.css file like that :
.addStyleEntry('animate', './node_modules/animate.css/animate.css')
My question is : is it a good way to add a CSS library like that ? I'm not sure if use directly the node_module path is a good practice..
Is there a better way ?
Normally you inject it directly in the .js file you are using
ex:
require('animate.css/animate.css')
or something in this way depending on your js superset if you have one so it will generate a .css file with your .js
an example is this:
on my first line of my typescript file I call this import ./style.css
after that Encore will generate me a nwe .css file that i can use in my template using {{ encore_entry_link_tags('entry') }}
I used to use the Compass library for SASS (.scss) but in my current project I'm not. In Compass I would load images for sprites like so:
#import "../../../images/sprites/large/*.png";
But now when I do this it gives the following error:
Error: File to import not found or unreadable: ../../../images/sprites/large/*.png
I know SASS doesn't have built in support for sprites but I copied over the compass sprite functions to be able to use them independent of the rest of the library.
Any idea how to solve this issue? The path is correct and the images do exist at that location relative to the .scss file where the import is called. I'm assuming this happens because on Compass's config.rb file you can define the import paths but on plain SASS there is no config file to do this from...