I configured next.js in order to use ant design and its components.
Here is the next.config.js file
const withSass = require("#zeit/next-sass");
const withLess = require("#zeit/next-less");
const nextTranslate = require('next-translate');
module.exports = {
...withLess(
withSass(nextTranslate({
lessLoaderOptions: {
javascriptEnabled: true,
},
}))
),
images: {
domains: ["storage.googleapis.com"],
}
}
With this configuration, I am able to make ant design work and change the theme from one .less file and I am getting the following warning :
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
So now, I am trying to use react-leaflet but it seems like this configuration is conflicting with the package's CSS. Map tiles are not displaying correctly and when I try import the CSS file (node_modules/leaflet/dist/leaflet.css ) directly in the component file. I am not able to access url(images/layers-2x.png);
How should I tweak the configuration in order to make both ant.d and react-leaflet packages work properly ? Or is it possible to use ant.d without a specific next.js configuration ?
PS: Next version 10.0.0
Related
I have a problem: I have a Next Js project that I need to upload as a static HTML page, but I'm facing an issue while exporting / building the files.
Here are the some notes regarding what I'm doing:
I've used both next build && next export commands to build a Static HTML
I'm using SASS to stylize my page
The SASS files are being used as a module
But, every time I try to build the page, the styling files are not rendering and this is not happening on my local environment.
My next.config.mjs file is looking like this:
import path from "path"
function defineNextConfig(config) {
return config;
}
export default defineNextConfig({
reactStrictMode: true,
swcMinify: true,
sassOptions: {
includePaths: [path.join('/', 'pages')],
},
});
Could it be an issue with the next commands? I'm not sure.
I appreciate the help! :D
I'm building a react app that mixes global css with css modules using Symfony's webpack encore. To avoid global CSS issues I've settled on using import 'app.css' for global styles and import styles from 'component.css?module' in my components. This is working as expected, however Jest is not pruning the ?module from the css module import and cannot find the file, giving me errors like Cannot find module './login.module.css?module' from 'assets/pages/Login/index.jsx'.
Does anyone know how to workaround this?
I managed to fix this myself. If anyone is interested, I enabled css modules in webpack.config.js by adding
.configureCssLoader((options) => {
options.modules = true;
})
However this then applies css module loading to all .css files and breaks global css rules.
So I modified the webpack config manually using the following at the end of webpack.config.js
const config = Encore.getWebpackConfig();
// only include files ending in module.css in the module css loader
config.module.rules[1].include = /\.module\.css$/;
// add another css loader without modules enabled to parse global css files
config.module.rules.push({
test: /\.css$/,
use: ["style-loader", "css-loader"],
exclude: /\.module\.css$/,
});
module.exports = config;
Not sure if this is the best way, but seems to be working ok at the moment!
I had some similar issue and fixed it with something like that (with Webpack Encore) :
.configureCssLoader(options => {
options.modules = {
auto: /\.module\.\w+$/i
}})
And now you can create a file with '.module.scss' suffix, and you can import it in a ts file. (working with jest, unlike ?module)
im trying to config next js typescript app to work with sass and next js font i have following this artical
without font module styles are working properly
here is my without font next.config.js
const withSass = require('#zeit/next-sass')
const withFont = require('nextjs-fonts');
module.exports =withSass({
cssModules: true
});
this is how i have try to config fonts to app
const withSass = require('#zeit/next-sass');
const withFonts = require('nextjs-fonts');
module.exports = withSass(withFonts({
webpack(config, options) {
return config;
},
}));
when i change next.config.js like this app will stop using styles
how can i fix this
Next.js has built-in sass support (including css modules) starting from version 9.3.
To avoid conflicts, the feature is disabled if you're using #zeit/next-sass or css related plugins.
https://nextjs.org/blog/next-9-3#built-in-sass-support-for-global-stylesheets
When nextjs-fonts or next-fonts is published, there are some issues when importing font files, but not anymore now, surely you don't need nextjs-fonts, you can define the #font-face css in .scss file.
Checkout this related Github issues
Background
#angular-builders/custom-webpack allows us to customize the webpack config of angular build, tutorial here. I am using it to build the additional scripts for web extension (Chrome/Firefox).
Here is the extra.webpack.config.js that I have included in angular.json
const { resolve } = require('path');
const scriptsDir = __dirname;
module.exports = {
entry: {
"background-script": resolve(scriptsDir, 'background-script/boot.ts'),
"fill-manager": [resolve(scriptsDir, 'fill-manager/boot.ts')],
"site-bridge": resolve(scriptsDir, 'site-bridge/boot.ts')
}
};
As expected it outputs background-script.js, fill-manager.js and site-bridge.js alongside angular build artifacts. As this webpack config is merged with the angular's webpack config, we can control all the optimizations, hashing, source maps etc from a single angular.json file.
Problem
I also want to bundle additional css files that would be used with extension scripts and be controlled by angular build.
I might be able to add specific rules, loaders etc to extra.webpack.config.js but I do not want to deal with postcss, autoprefixer and sass loaders etc as its already being done inside angular.
Just like script files, simply adding css entry inside extra.webpack.config.js does not produce css file i.e.
module.exports = {
entry: {
...
"fill-manager": [resolve(scriptsDir, 'fill-manager/boot.ts'), resolve(scriptsDir, 'fill-manager/main.css')],
...
}
};
Is there a way where I can specify a css/scss file entry in extra.webpack.config.js and it just output a bundled css file using configuration based on angular?
I'm building a small web app with Webpack-enabled CSS modules (via css-loader) and without React. My goal is to get the benefits of short, obfuscated CSS class names (as I'm currently using lengthy BEM class names) in my HTML by using the localIdentName: '[hash:base64:8]' option on css-loader. Since I'm not using React, I'm working with raw HTML that is not being programmatically generated through JSX file or document.write.
I've used css-loader with React plenty before, and it ultimately works because you're able to import the style class names in the React file and refer to them using the human-readable names, regardless of whatever the class name gets changed to by Webpack.
However, I'm confused how to deal with this when using raw HTML; I can't just import the styles in since it's not a JS file. If I have a class called photo__caption--large referenced in my HTML, and webpack converts the class name to d87sj, the CSS file will say d87sj but the HTML will still say photo__caption--large.
Is there some kind of loader for HTML files that's able to edit class names in the file to their Webpackified equivalents? Or should I really just be using React with CSS modules?
This github code might help you.
https://github.com/moorthy-g/css-module-for-raw-html
A bit of complicated setup needed. We need to wire the following packages together.
- postcss-loader
- postcss-modules
- posthtml-css-modules
- posthtml-loader
The following postcss configuration creates modules dump file (./tmp/module-data.json).
// postcss.config.js
module.exports = {
plugins: {
'postcss-modules': {
getJSON: function(cssFileName, json) {
const path = require('path'), fs = require('fs');
const moduleFile = path.resolve('./tmp/module-data.json');
const cssName = path.basename(cssFileName, '.css');
const moduleData = fs.existsSync(moduleFile) ? require(moduleFile) : {};
moduleData[cssName] = json;
fs.existsSync('./tmp') || fs.mkdirSync('./tmp');
fs.writeFileSync(moduleFile, JSON.stringify(moduleData));
},
generateScopedName: '[local]_[hash:base64:5]'
}
}
}
And the following webpack rule links html file to modules dump file.
{
test: /\.html$/,
use: [
{ loader: 'html-loader' },
{
loader: 'posthtml-loader',
options: {
plugins: [
require('posthtml-css-modules')('./tmp/module-data.json')
]
}
}
]
}
Finally, HTML uses css-module attribute instead of class
<div css-module="main.container">
<h2 css-module="main.title">Title for the page</h2>
</div>
Let me know if you have any issues
My understanding of Webpack, CSS Modules, & CSS-Loader is that the entire point is to use javascript to generate the files.
This enables all the name translation and what not. What's your goal with Webpack if you're writing static HTML?
There are several static site generators for Webpack that will allow you to get the result you want, BUT they're still building the HTML files.
Alternately you could look at tools similar to React (Vue or Angular) that allow you to write all your "templates" in straight HTML. In Vue for example, you can write only HTML (to be compiled from javascript) without needing to use any of its data binding or routing.