Has anyone used gatsby-remark-image-attributes? My image displays but the styling does not work.
"This plugin can handle already processed images (type: ‘html’), as long as the node object contains an attributes field and the value an tag." This is from the docs - not sure how to add an attributes field to the node which might be where I am messing up.
Here is my image inside a md file:
Here is my config (I am using it like in the example on it's page on the Gatsby site with gatsby-remark-images):
plugins: [
`gatsby-plugin-sharp`,
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1500,
quality: 100,
// wrapperStyle: 'margin-bottom:100px' **This also does not work for me
},
},
`remark-image-attributes`,
{
resolve: `gatsby-remark-image-attributes`,
options: {
styleAttributes: [`margin-bottom`],
},
}
],
},
},
`gatsby-transformer-sharp`,
Width gatsby-remark-image-attributes you also need to use remark-image-attributes plugin in your gatsby config for it to work
`gatsby-plugin-sharp`,
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1500,
quality: 100,
},
},
`remark-image-attributes`,
{
resolve: "gatsby-remark-image-attributes",
options: {
styleAttributes: [`margin-bottom`],
},
}
],
},
},
`gatsby-transformer-sharp`,
Once you do that, your image margin-bottom attribute will be used like
Related
I have #svgr/webpack#6.0.0 installed and webpack config as below
use: [
{
loader: '#svgr/webpack',
options: {
svgoConfig: {
plugins: [
{
removeViewBox: false,
},
],
},
},
},
],
But I am getting an error as below:
Error: Plugin name should be specified
The latest SVGO documentation suggests that you need to assign each plugin object a name. Your configuration is out of date so it's most likely a version/update issue. Try changing the options object in your config to:
svgoConfig: {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
// disable plugins
removeViewBox: false,
},
},
},
],
},
The preset-default plugin allows you to customise the defaults and allows you to disable plugins that are enabled by default.
Basically, every time that i create a TYPESCRIPT gatsby project, i get errors on the file gatsby-config.ts.
Errors are in bold font.
import type { GatsbyConfig } from "gatsby";
require('dotenv').config({
path: `.env.${process.env.NODE_ENV}`,
});
const strapiConfig = {
apiURL: process.env.STRAPI_API_URL,
accessToken: process.env.STRAPI_TOKEN,
collectionTypes: ['article', 'company', 'author'],
singleTypes: [],
};
const config: GatsbyConfig = {
siteMetadata: {
title: ``,
siteUrl: `https://www.yourdomain.tld`
},
plugins: ["gatsby-plugin-sass", {
resolve: 'gatsby-plugin-google-analytics',
options: {
"trackingId": "portfolio-vanny-1"
}
}, "gatsby-plugin-image", "gatsby-plugin-react-helmet", "gatsby-plugin-mdx", "gatsby-transformer-remark", "gatsby-plugin-sharp", "gatsby-transformer-sharp", {
resolve: 'gatsby-source-filesystem',
options: {
"name": "images",
"path": "./src/images/"
},
***__key: "images"***
}, {
resolve: 'gatsby-source-filesystem',
options: {
"name": "pages",
"path": "./src/pages/"
},
**__key: "pages"**
},
{
resolve: `gatsby-source-strapi`,
options: strapiConfig,
}]
};
export default config;
It seems that those errors doesnt affect anything on my project but its weird, i dont even touch the code and it throws me those errors.
It is a project composed of Vite & React & antd.
I want to handle antd theme dynamically in vite.config.ts.
I would appreciate it if you could tell me how to modify less.modifyVars value in React component.
This is the current screen.
light state /
dark state
In dark mode, the style of the select component does not work properly.
import { getThemeVariables } from 'antd/dist/theme'
...
css: {
modules: {
localsConvention: 'camelCaseOnly'
},
preprocessorOptions: {
less: {
javascriptEnabled: true,
modifyVars: {
...getThemeVariables({
dark: true // dynamic
})
}
}
}
}
}
You need to import 'antd/dist/antd.less' instead of 'antd/dist/antd.css'
Install dependency for less npm add -D less. Vite will automatically catch it.
Use the following config:
css: {
preprocessorOptions:{
less: {
modifyVars: {
'primary-color': '#1DA57A',
'heading-color': '#f00',
},
javascriptEnabled: true,
},
},
},
It's been a while, but this is works for me now:
You need to make sure you import less on demand. I use plugin vite-plugin-imp to achieve. And then getThemeVariables should be work well.
import vitePluginImp from 'vite-plugin-imp';
import { getThemeVariables } from 'antd/dist/theme';
export default defineConfig({
plugins: [
// ...
vitePluginImp({
libList: [
{
libName: 'antd',
style: (name) => `antd/es/${name}/style`,
},
],
}),
],
resolve: {
alias: [
// { find: '#', replacement: path.resolve(__dirname, 'src') },
// fix less import by: #import ~
// https://github.com/vitejs/vite/issues/2185#issuecomment-784637827
{ find: /^~/, replacement: '' },
],
},
css: {
preprocessorOptions: {
less: {
// modifyVars: { 'primary-color': '#13c2c2' },
modifyVars: getThemeVariables({
dark: true,
// compact: true,
}),
javascriptEnabled: true,
},
},
},
});
Moreover: you can get more inspiration from here: vite-react/vite.config.ts
I have a file structure like so:
src
- images
- - blog-images
- - - (various png and jpg files)
- pages
- - blog
- - - (various .md files)
I successfully created the blog pages through with a template. I cannot figure out how to make these images appear. I have included gatsby-remark-images and modified by gatsby-config.js to appear like this:
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `blogImages`,
path: `${__dirname}/src/images/blog-images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `blog`,
path: `${__dirname}/src/pages`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/Favicon.png`, // This path is relative to the root of the site.
},
},
`gatsby-plugin-sass`,
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography`,
}
},
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1200
}
}
]
}
},
Occasionally, the image will show up as I move it from the blog-images folder to images or the pages/blog folder. But then I try to adjust it or get a second image on the page working by moving it and it stops working. I undo what broke the image and it does not come back.
I've tried following this post and this one, but I'm not any closer to understanding what I'm doing wrong.
Moments after posting, I figured it out.
I was trying to reference the image via [alt](./filename.png) or [alt](./blog-images/filename.png). I ended up referencing it relative to the post, instead of any of my image-centric gatsby-source-filesystem configs.
What worked was [alt](../../images/blog-images/filename.png)
I am using typescript, webpack, sass in my project. now I set background-imgae in scss using this way: url(../../assets/image/a.png),
however it is really ugly, I want to import image like this: url(a.png), what should I do ?
I have used url-loader, file-loader, resolve-url-loader to solve the problem, actually, I am just a entry level of webpack. I am really confused now. Here is my code
in wepack :
{
test: /\.scss|css$/i,
use: [
require.resolve("style-loader"),
{
loader: require.resolve("css-loader"),
options: {
importLoaders: 1
}
},
{
loader: require.resolve("sass-loader")
},
{
loader: require.resolve("resolve-url-loader")
},
AntdScssThemePlugin.themify({
loader: "sass-loader",
options: {
sourceMap: true
}
}),
{
loader: require.resolve("postcss-loader"),
options: {
ident: "postcss",
plugins: () => [
require("postcss-flexbugs-fixes"),
autoprefixer({
browsers: [
">1%",
"last 4 versions",
"Firefox ESR",
"not ie < 9"
],
flexbox: "no-2009"
}),
postcssAspectRatioMini({}),
postcssPxToViewport({
viewportWidth: 375, // (Number) The width of the viewport.
viewportHeight: 1334, // (Number) The height of the viewport.
unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: "vw", // (String) Expected units.
selectorBlackList: [".ignore", ".hairlines"], // (Array) The selectors to ignore and leave as px.
minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
mediaQuery: false // (Boolean) Allow px to be converted in media queries.
}),
postcssWriteSvg({
utf8: false
}),
postcssCssnext({}),
postcssViewportUnits({}),
cssnano({
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false
})
]
}
}
]
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
"file-loader?hash=sha512&digest=hex&name=[hash].[ext]",
{
loader: "image-webpack-loader",
query: {
mozjpeg: {
progressive: true
},
gifsicle: {
interlaced: false
},
optipng: {
optimizationLevel: 4
},
pngquant: {
quality: "75-90",
speed: 3
}
}
},
]
},
In index.scss
background: url("../../assets/images/sprite_languages.png")
and I really want to use this way:
background: url("sprite_languages.png")
What could I do? Thank you very much
You could do this in webpack config:
resolve: {
alias: {
'#assets': path.resolve(__dirname, './src/assets'),
},
},
And then in scss:
background: url("~#assets/images/sprite_languages.png");