My goal is to import the fonts by:
#import url('https://fonts.googleapis.com/css?family=Poppins:i,100,200,300);
in my .scss file, then preload all the fonts by preload-webpack-plugin
After I deployed my bundle, the google fonts are applied, and the font request is like this:
Compare to the request which utilized #font-face in the .scss file, get the fonts downloaded to local then served by myself:
Only the file name of second one follows the name I defined in file-loader configuration:
exports.font = {
test: /\.(woff|woff2|ttf|eot)$/,
loader: 'file-loader',
query: {
name: '[name]-[hash:6].[ext]',
},
};
It's still reasonable for me, so my guess is, I think when Webpack is creating Dependency Graph css-loader interprets #import and url(), then file-loader duplicates the files to our dist folder, but if the source is from external, file-loader won't work on that.
Again, compare requests to CDN and local, the Sources section in Devtool shows me:
CDN:
Local:
When I request fonts from CDN there is a new folder gstatic, before I add preload-webpack-plugin, the fonts are requested dynamically when meet the new fonts family/style in the new pages, after I add preload-webpack-plugin, the fonts are preloaded only for the way which is sending fonts request to local.
exports.preloadWebpack = new PreloadWebpackPlugin({
rel: 'preload',
include: 'allAssets',
fileWhitelist: [/\.woff/, /\.woff2/, /\.ttf/],
as: 'font',
});
Any help is appreciated!!
You could consider using: Google Fonts Webpack Plugin,
and install it using npm in this way:
npm install #beyonk/google-fonts-webpack-plugin
More info.
Related
I have created a simple new Rails 7 project from scratch with Esbuild and React to get to know these, and they indeed feel like a step up from Webpack, except I can't manage to have my static files (ie image) served in production.
I have an Esbuild config file:
// esbuild.config.js
const path = require('path');
require("esbuild").build({
entryPoints: ["application.jsx"],
bundle: true,
outdir: path.join(process.cwd(), "app/assets/builds"),
absWorkingDir: path.join(process.cwd(), "app/javascript"),
publicPath: "assets",
sourcemap: true,
watch: process.argv.includes('--watch'),
plugins: [],
loader: {
'.js': 'jsx',
'.jpg': 'file',
'.png': 'file',
'.MOV': 'file'
},
}).catch(() => process.exit(1));
I store my images in the app/javascript/images/ folder, and import and use them in a React component like that (for example):
import MyImage from "./images/myimage.jpg"
import styled from "styled-components";
//...
const SomeStyledComponent = styled.div`
background-image: url(${MyImage});
`
In development, everything works fine, Esbuild copies the images in the app/assets/builds/ folder, fingerprints them, and prepends all the images url with the publicPath property of my Esbuild config. The above image for example then has the relative url assets/myimage-FINGERPRINT.jpg which is served correctly in development.
Then things get complicated in production (production here being just a Docker container built for production - I don't add the Dockerfile to keep things simple as I don't think it would help, but happy to provide it of course).
In my production.rb I have added the following:
config.public_file_server.enabled = true
(which will be replaced by an environment variable later)
The assets precompiling succeeds, and my images are in the app/public/assets/ folder, fingerprinted once more by Sprockets this time (from what I understand), but now I get 404. I have tried changing Esbuild publicPath and have tried to get the images directly in my browser, but whatever I try (assets, public, public/assets), nothing work and I am running out of ideas.
I have temporary fix which is to change the loader for images to dataurl, but that does not feel like a good practice, as my compiled javascript is going to explode.
Thank you for your help!
I ran into a similar issue, and by looking at the answers to https://github.com/rails/jsbundling-rails/issues/76 and this PR: https://github.com/rails/sprockets/pull/726/files
I was able to figure out the proper setup that works.
in the build options, I changed
publicPath: "assets",
to
publicPath: "/assets",
(included the leading /, which was missing before and causing the wrong path to be used)
and then added the following option
assetNames: "[name]-[hash].digested",
which, as you might be able to tell from the linked PR, would prevent Sprockets from adding an additional layer of fingerprinting.
I hope that helps.
I am trying to use sass with react, but none of my sass files are loading. I did not use create-react-app to start this project, I started it from scratch using web pack and npm init.
When I try to use a variable, like $titleColor, I get an error,
"Uncaught ReferenceError: $titleColor is not defined".
There are no import errors, and all imported paths are successfully loaded. There are no compile errors either--if I don't try to access $titleColor, my app works fine.
Here is my code:
// index.html:
<link rel="stylesheet" href="/src/assets/styles/app.scss">
<link rel="stylesheet" href="/src/assets/styles/colors.scss">
// app.scss
#font-face {
font-family: "San Francisco";
font-weight: 400;
src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}
#import "./colors.scss"
// colors.scss
$titleColor: 'rgba(211,64,80,1.0)';
// menuSection.js, a React Component
import '../../assets/styles/colors.scss'
// web pack config
module: {
rules: [
{
test: /\.scss$/,
use: ["sass-loader"]
}
]
}
please try in this way,
1. install 'npm install node-sass --save'.
2. rename app.css file to app.scss
3. create a new file with name variable.scss and put your title color like
$titleColor: #aeaeae;
4. import this color in app.scss with #import "variables.scss".
5. then use your $titleColor like 'background-color: $titleColor'.
You cannot "attach" a SASS/SCSS file to an HTML document.
Try to compile into a CSS and attach that css file to HTML document
How to include SCSS file in HTML
and $titleColor error is because of global variables file is not included or global variable $titleColor is not defined in your project, search for $titleColor in your project and make sure it is included in your .scss file
Check the usage of SCSS variales
you installed only-sass loader. this just tells webpack to recognize .scss files. you have to tell webpack evrything step by step. I assume you already installed node-sass as well because sass-loader requires it.
you need to install css loader and style loader. css loader takes your css and turns it to javascript code inside the bundle.js. style loader will take that javacript code and inject it into the DOM. after you installed, add them to webpack.config.js like so:
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}]
},
rules are the kinda to do list for webpack. each rule is defined in an object. test will tell webpack whenever it sees this type of file, do what loaders say. if you have only one loader u define just like loader:"". if you have an array of loaders u use use:[]. you have to be aware that there is an order to this array in .scss rule.
css-loader is translator, style-loader is injector. it seems like first you have to translate and add css-loader first. but actually they load in reverse order.
in your index.html you do not need to link any css file. style-loader will handle it.
I am looking to precache images for a PWA, using this documentation.
I have tried several iterations, but I am struggling with the globs.
Here's one instance of the plugin code on my webpack.config.js:
new InjectManifest({
swSrc: './client/sw-src.js',
swDest: '../sw.js',
exclude: [/\.twig$/],
globPatterns: ['/img/*.{svg,jpg,webp}']
}),
The directory structure is as follows:
/public
/dist => there's where the 'regular' webpack assets are
/img => directory I want to add to precache on top of /dist
...
I have also tried to use globDirectory, with no luck.
It works if I manually add the code below to my sw-src.js file, but that is not ideal and prone to errors.
workbox.precaching.precache([
'/img/circles.svg',
'/img/concept-1.jpg',
......
]);
workbox.precaching.addRoute();
One thing worth mentioning is that Workbox works with webpack assets that have been added to the compilation output. It's possible that you have files in the build context, like images in your repository, but they need to actually be required or otherwise added to the output.
One easy way to achieve this is to use copy-webpack-plugin. This is really useful when migrating to webpack from other build tools or when your dynamically constructing asset URLs and aren't using webpack loaders.
EDIT: Adding setup with actual solution:
This is the new directory setup:
/assets/img/ => origin directory for copy-webpack-plugin
/public
/dist => there's where the 'regular' webpack assets are
/img => destination directory for copy-webpack-plugin
And the actual code for copy-webpack-plugin and also adjusting the clean-webpack-plugin
new CleanWebpackPlugin(['public/dist/*.*', 'public/img/*.*']),
new CopyWebpackPlugin([
{ from: './assets/img/', to: '../img' },
]),
I followed by instructions included in Bootstrap documentation https://getbootstrap.com/docs/4.0/getting-started/download/#npm and installed Bootstrap via Webpack.
Then I wanted to import css styles as here https://getbootstrap.com/docs/4.0/getting-started/theming/ AND
I'VE ENCOUNTERED A PROBLEM:
When I adding this import (#import "node_modules/bootstrap/scss/bootstrap";) to my custom.scss file and order sass --watch custom.scss:custom.css in the console I'm getting this two errors:
1) Error: Cannot find module
"-!../../node_modules/css-loader/index.js?{"importLoaders":1}!../../node_modules/postcss-loader/lib/index.js??postcss!../../node_modules/bootstrap/scss"
2)./src/tu_sassy/custom.css Module not found: Can't resolve
'../../node_modules/bootstrap/scss' in
'/home/zebra/Desktop/testowa/src/tu_sassy'
My file structure is similar as in Bootstrap documentation, included as screenshot below.
!For more I need to add that when I delete this import from custom.scss everything works like a charm ...AND is still reusable and non-corrupted to original Bootstrap stylesheet 'my own stylesheet' WHY ?
One quick tip up front. If you want to write inline-code within your StackOverflow post, use backticks (`) around the code. That makes reading your post much easier.
Sass has its own functionality to import from node modules. Webpack Sass loader provides the ~ (tilde) prefix as a way to tell the compiler that it should resolve the path out of the node_modules folder.
#import "~bootstrap/scss/bootstrap";
If you have a dependency tree of packages within node_modues that import sass files, you can also tell Webpack Sass loader to include node_modules for resolving paths:
{
loader: "sass-loader", // compiles Sass to CSS
options: {
includePaths: [
join(dirname(module.filename), 'node_modules')
]
}
When I create my production bundle I do not require any stylesheets in javascript, they are included in index.html. The stylesheets are compiled with a grunt watch from sass to a bundle.css.
While developing I use webpack dev server. Now I want to include the css in the javascript bundle for hot module replacement, but without changing any existing javascript files.
The dev server is using dedicated index.html and webpack.config files, so preferably that's where I include the css bundle. Is this possible?
Maybe it's worth mentioning that I'm using React.
Answer: It looks like you can change the entry[] of webpack.config (example), to access a different .js file. Try creating referencing two different .js entry files for your respective webpack.config files, to import a different CSS file or omit the import line entirely. This compromises DRY, but does what you want.
React shouldn't make any difference.
Hot module is a red herring; it's implemented as a plugin, independently of the above:
plugins: [
...
new webpack.HotModuleReplacementPlugin());
],
Omitting the CSS module loader in webpack.config.dev wouldn't work.
module: {
loaders: [
...
{test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']}
]
}
because it would cause a parse error in import 'path/to/my.css' in index.js