I use the Razzle which has a pretty good support for the CSS modules. It uses just the Webpack with common CSS Loader, so it is configurable the same way. My trouble is that I'm not able to use SCSS files the same way.
Works:
import styles from "./App.module.css";
... <div className={styles.foo}>
Doesn't work
import sasses from "./App.module.scss";
... <div className={sasses.foo}>
My configuration:
module.exports = {
plugins: [
{
name: "scss",
options: {
css: {
modules: true
}
}
},
How to configure the Razzle to use the SCSS modules?
Related
I am trying to remove unused CSS from my code, but I am struggling with tree-shaking my CSS files.
I decided to use rollup instead of webpack, because it was said that tree-shaking is a core idea behind the library, but now it seems to me that rollup is not capable of tree-shaking CSS files at all.
What I am doing is the following:
I create a rollup config for my page:
export default [
{
input: "path/to/index.js",
output: [
{
format: "esm",
file: "path/to/output/index.min.js",
},
],
treeshake: true,
plugins: [
postcss({
extract: true,
plugins: [cssnano()],
extensions: [".css"],
}),
resolve(),
commonjs(),
terser(),
],
},
Then I have my index.js file where I import my CSS and my JS:
import "../path/bootstrap.css";
import "../path/css/nav.css";
import "../path/css/footer.css";
import "bootstrap/js/dist/carousel";
import "../modules/css/example.css/";
import { example_function } from "../path/to/js/example.js";
example_function();
I run the rollup bundler and it creates a minified JS and a minified CSS file. So far so good, but it still includes the complete bootstrap classes for the CSS. I would like to tree-shake the CSS and only include the classes that are actually used.
Are there some settings that I am missing? Or is this not as easyly possible as I hope to achieve it.
I am trying to bundle my stylesheets which should use bootstrap v5. I can bundle my CSS files without a problem but I cannot get bootstrap to work. The bundler runs through, but bootstrap styles are not included.
What I did:
I installed bootstrap with npm install bootstrap (https://getbootstrap.com/docs/5.0/getting-started/download/#npm)
I included bootstrap into:
either my JS file with import 'bootstrap';
in my CSS with #import "node_modules/bootstrap/dist/css/bootstrap"; (This is not working because it tells me that my file is not found)
My rollup.config:
import resolve from "#rollup/plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import { terser } from "rollup-plugin-terser";
import postcss from "rollup-plugin-postcss";
import cssnano from "cssnano";
export default [
{
input: "project/static/src/inputs/index.js",
output: [
{
format: "esm",
file: ""project/static/src/outputs/index.min.js",",
},
],
plugins: [
postcss({
extract: true,
plugins: [cssnano()],
extensions: [".css"],
}),
resolve({
jsnext: true,
browser: true,
}),
commonjs(),
terser(),
],
},
];
This config creates a separate CSS file because I set extract = true for the postcss plugin.
Then, in my CSS file:
#import "../modules/css/example.css";
#import "node_modules/bootstrap/dist/css/bootstrap";
.container-example {
margin-top: -1.5rem;
}
In my JS
import "./example.css";
import 'bootstrap';
//more JS here
I then run the bundler and it bundles my JS and also my styles. But it does not include any bootstrap styles... I can't seem to figure out why. Maybe because BS is all about SASS? Any ideas? Help is very much appreciated.
Is there any way to import .scss / .css files using aliases
// webpack.config.js
resolve: {
alias: {
styles: path.resolve(__dirname, "src/styles/"),
}
}
and in main.js
// main.js
import "styles/main.scss";
Webpack alias' should be prefoxed with tilde in sass imports. So your syntax should be:
import "~styles/main.scss";
Is it possible to import ES Modules from CommonJS dynamically without having to change the file extension to mjs and if possible using old Node versions (older than V13)? I'm creating a CLI library which will dynamically import files from users project to auto-generate some code based on those files.
// bin.ts
// This file will be transpiled to CommonJS
const loadResourceFile = async (url: string) => {
const resource = await import(url);
return resource.default;
}
...
// rollup.config.js
import typescript from 'rollup-plugin-typescript2';
import pkg from './package.json';
const commonOutputOptions = {
banner: '#!/usr/bin/env node',
preferConst: true,
sourcemap: true,
};
export default {
input: 'src/bin.ts',
output: [
{
...commonOutputOptions,
file: pkg.main,
format: 'cjs',
},
{
...commonOutputOptions,
file: pkg.module,
format: 'esm',
},
],
external: [...Object.keys(pkg.dependencies || {})],
plugins: [typescript()],
inlineDynamicImports: true,
};
// resource.js
// This file will be a ES module
import a from './a';
export default {
a,
b: 'y',
}
Thank you in advance!
It is possible, with the use of vm (Specifically this) and fs although I would suggest not going this route since it quickly grows into an unmaintainable mess if you aren't careful.
Since your aim is to also support older nodejs versions, I would suggest you make two separate bundles, this way you do not mix CommonJS and ES modules.
When I use only const Example1 = require('./example1.js) statement then code inside example1.js file is getting included in the bundle. And if I use only import Example2 from './example2.js' then also code inside example2.js is getting included in the bundle. But if I use both the statements only import is working and require is not working.
I am using rollup for bundling.
My rollup configuration looks like this
import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import external from 'rollup-plugin-peer-deps-external'
import postcss from 'rollup-plugin-postcss'
import resolve from 'rollup-plugin-node-resolve'
import url from 'rollup-plugin-url'
import svg from 'rollup-plugin-svg'
import json from 'rollup-plugin-json';
import { terser } from 'rollup-plugin-terser'
export default {
input: 'src/sdk/test.js',
output: [
{
file: "src/sdk/sdk.js",
format: 'cjs'
},
{
file: "src/sdk/sdk.es.js",
format: 'es'
},
{
file: "src/sdk/sdk.iife.js",
format: 'iife'
}
],
plugins: [
resolve({
browser: true,
}),
commonjs(),
external(),
postcss({
modules: true
}),
url({
limit: 100 * 1024,
emitFiles: false
}),
svg(),
babel({
exclude: 'node_modules/**',
"plugins": ["#babel/plugin-proposal-class-properties"]
}),
terser(),
json()
]
}
By default, rollup supports 'esm' modules as entry. If you like to include commonjs files in the project, you can include '#rollup/plugin-commonjs' into plugins field, it usually works.
Maybe the following config will help, I tried with very simple example:
commonjs({transformMixedEsModules:true})
transformMixedEsModules
Instructs the plugin whether or not to enable mixed module transformations. This is useful in scenarios with mixed ES and CommonJS modules. Set to true if it's known that require calls should be transformed, or false if the code contains env detection and the require should survive a transformation.
https://github.com/rollup/plugins/tree/master/packages/commonjs