Hi everyone,
I have a problem with postCSS: it works with extract: true
and not with extract: false; inject:true
Here is my rollup.config.js
import commonjs from "@rollup/plugin-commonjs"
import peerDepsExternal from "rollup-plugin-peer-deps-external"
import typescript from "rollup-plugin-typescript2"
import postcss from "rollup-plugin-postcss"
import packageJson from "./package.json"
import { terser } from "rollup-plugin-terser"
import progress from "rollup-plugin-progress"
import { visualizer } from "rollup-plugin-visualizer"
export default [
{
input: ["src/index.ts", "src/inputs/index.ts"],
output: [
{
dir: "dist",
format: "cjs",
exports: "auto",
sourcemap: false
}
],
preserveModules: true,
plugins: [
progress(),
peerDepsExternal(),
commonjs(),
typescript({ useTsconfigDeclarationDir: true }),
postcss({
extract: true,
minimize: true,
modules: true
}),
terser(),
visualizer({})
],
external: [...Object.keys(packageJson.peerDependencies || {}), ...Object.keys(packageJson.dependencies || {})]
}
]
Here is my TextField.tsx
import React from "react"
import classnames from "classnames"
import ITextFieldProps from "./TextField.types"
import style from "./TextField.module.scss"
const TextField: React.FC<ITextFieldProps> = (props: ITextFieldProps) => {
return <div className={classnames("text-field", style.textField)}>{props.name}</div>
}
export default TextField
Here is my TextField.module.scss
@import "../../style/variables.scss";
.textField {
background-color: $color;
}
Here are my devDependencies
"devDependencies": {
"@rollup/plugin-commonjs": "^19.0.1",
"@rollup/plugin-node-resolve": "^13.0.2",
"@rollup/plugin-typescript": "^8.2.3",
"@storybook/addon-actions": "^6.3.4",
"@storybook/addon-essentials": "^6.3.4",
"@storybook/addon-links": "^6.3.4",
"@storybook/addon-storyshots": "^6.3.4",
"@storybook/node-logger": "^6.3.4",
"@storybook/preset-create-react-app": "^3.2.0",
"@storybook/react": "^6.3.4",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/react": "^17.0.14",
"@types/react-dom": "^17.0.9",
"node-sass": "^6.0.1",
"postcss": "^8.3.6",
"rollup": "^2.53.2",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.0",
"rollup-plugin-progress": "^1.1.2",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.30.0",
"rollup-plugin-visualizer": "^5.5.2",
"sass": "^1.35.2",
"tsconfig-paths-webpack-plugin": "^3.5.1"
},
Pay now to fund the work behind this issue.
Get updates on progress being made.
Maintainer is rewarded once the issue is completed.
You're funding impactful open source efforts
You want to contribute to this effort
You want to get funding like this too