Open Lory1990 opened 3 years ago
Hi everyone, I have a problem with postCSS: it works with extract: true and not with extract: false; inject:true
extract: true
extract: false; inject:true
Here is my rollup.config.js
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
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
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" },
Also doesn't work for me!
any update on this?
Hi everyone, I have a problem with postCSS: it works with
extract: true
and not withextract: false; inject:true
Here is my
rollup.config.js
Here is my
TextField.tsx
Here is my
TextField.module.scss
Here are my devDependencies