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)
Related
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
I have an GastbyJS application, and I'm trying to add typescript on it. I solve most of the issues, but I'm not able to make the css module work with it.
I have this import in my file, that works fine:
import styles from "./card.module.css"
But when I added the typescript config it says that Cannot find module './card.module.css'.ts(2307)
I tried to use some gatsby plugins, but they didn`t work as expected.
The whole code is here: github
I had the same problem and after trying all the various plugins I came across this solution which worked for me.
Create a css.d.ts file with:
declare module '*.css' {
const content: { [className: string]: string };
export default content;
}
Add these lines to your tsconfig.json file:
"esModuleInterop": true,
"files": ["./src/typings/css.d.ts"]
The "files" path needs to match where your type definition file is.
https://github.com/thetrevorharmon/gatsby-starter-typescript-sass/issues/1#issuecomment-436748732
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.
In my project, I need to combine stylesheets that were written in 2 different preprocessor languages (SASS and Stylus) into one css file.
My naïve approach was to just add stylus-loader with a test for the .styl extension into my webpack config, and #import a stylus file from my app.scss file (which is the entrypoint).
It seems that sass-loader doesn't resolve modules like it happens in JavaScript. I also tried making an entrypoint CSS file with my app.scss and the Stylus file as imports, which also doesn't work.
Is this just a configuration I'm missing or do css-loader and sass-loader just not support this kind of module resolve?
Entry CSS
#import "sass-loader!./app.scss";
#import "stylus-loader!../node_modules/vuetify/src/stylus/main.styl
This will just result in this error:
ERROR in ./node_modules/css-loader??ref--6-1!./css/app.css
Module not found: Error: Can't resolve './sass' in '/Users/tux/projects/zenner/platform-base/platform/assets/css'
# ./node_modules/css-loader??ref--6-1!./css/app.css 3:10-95
ERROR in ./node_modules/css-loader??ref--6-1!./css/app.css
Module not found: Error: Can't resolve './stylus' in '/Users/tux/projects/zenner/platform-base/platform/assets/css'
# ./node_modules/css-loader??ref--6-1!./css/app.css 4:10-131
Because none of css-loader, sass-loader or style-loader can load files in other languages (which I think should be possible with a loader chain string like sass-loader!my-file.scss), I instead imported the styles in my index javascript file and used extract-text plugin. This works fine.
webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")
const extractCSS = new ExtractTextPlugin('css/styles.css')
{
test: /\.scss$/,
use: extractCSS.extract({use: ["css-loader", "sass-loader"]})
}, {
test: /\.styl$/,
use: extractCSS.extract({use: ["css-loader", 'stylus-loader']})
}
app.js
import "../css/app.scss"
import "vuetify/src/stylus/main.styl"