Can't use @apply in css file in create-react-app

[eddyhdzg]

Is there any way to use @apply in css file in create-react-app?

[ubheamar]

Hey did you find any solution for this i am using typescript & trying to use import "./App.css"

in App.css
.Foo{
@apply overflow-hidden;
}
not working

[Apostolique]

Is it possible that the css files are not getting processed through postcss?

[ubheamar]

Yes you are correct fixed the issue by adding postcss in webpack

[ubheamar]

I spend three days for this let me share solution

webpack rules:
rules: [ { test: /\.css$/i, use: [ "style-loader", { loader: "css-loader", options: { import: true } }, "postcss-loader" ] }, { test: /\.(ts|js)x?$/, exclude: /node_modules/, use: "babel-loader" } ]
postcss.config.js
module.exports = { plugins: [ require("postcss-import"), require("autoprefixer"), require("tailwindcss"), /* process.env.NODE_ENV === "production" && require("@fullhuman/postcss-purgecss")({ content: ["src/!**!/!*.jsx", "src/!**!/!*.js","src/!**!/!*.tsx","src/!**!/!*.ts"], whitelist:["body"], defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [] })*/ ] };

[kungpaogao]

Does this work with hot reload?

[ubheamar]

I have not tested with hot reload