I'm trying, without success so far, to load postcss
, .pcss
files with webpack
Packages installed :
"postcss": "^8.4.13",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-loader": "^6.2.1",
"extract-text-webpack-plugin": "^3.0.2"
"webpack": "^5.23.0",
"webpack-bundle-analyzer": "^4.4.0",
"webpack-cli": "^4.5.0"
In webpack.config.js
file :
{
test: /\.pcss$/,
use: [
//{
//loader: 'style-loader',
//},
//{
//loader: 'css-loader',
//options: {
//sourceMap: true,
//},
//},
{ // https://github.com/webpack-contrib/postcss-loader#getting-started
loader: 'postcss-loader',
options: {
//config: {
//path: `${__dirname}/postcss.config.js`,
//},
postcssOptions: {
plugins: [
"postcss-preset-env",
],
},
//sourceMap: true,
},
},
],
},
But it still says:
ERROR in ./src/assets/css/rssfeeds/app.pcss 9:0
Module parse failed: Unexpected token (9:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| html,
| body,
> #app {
| min-height: 100vh;
| }
I tried also in this way in webpack.config.js
:
const extractPCSS = new ExtractTextPlugin('../css/[name].css');
{
test: /\.pcss$/,
// https://stackoverflow.com/questions/46865384/postcss-with-webpack?rq=1
use: extractPCSS.extract([ 'css-loader', 'postcss-loader' ])
}
But I still get this error:
ERROR in ./src/assets/css/rssfeeds/app.pcss 9:0
Module parse failed: Unexpected token (9:0)
You may need an appropriate loader to handle this file type,
currently no loaders are configured to process this file
The postcss
file is:
html,
body,
#app {
min-height: 100vh;
}
div[role='menu'] {
outline: none;
}
div[role='menuitem'] {
outline: none;
}
input:focus {
outline: none;
}
[role='button']:focus {
outline: none;
}
[role='menuitemradio']:focus {
outline: none;
}
.thin-scroll {
@apply overflow-y-scroll;
}
.thin-scroll::-webkit-scrollbar {
@apply bg-transparent w-2;
}
.thin-scroll::-webkit-scrollbar-thumb {
@apply bg-gray-500 rounded-lg border-4 border-transparent bg-clip-content;
}
.rss-item {
@apply leading-8 text-gray-300 flex items-center justify-between cursor-pointer px-3 py-2;
}
.rss-item.active {
@apply bg-gray-600;
}
Other info:
node: v16.15.0
O.S.: Ubuntu 20.04 Desktop