Myujth

I configured this in webpack.

At the beginning, postcss can take effect, but if you introduce the image in scss, you will report such an error, so I added publicPath to postcss and found that no error was reported, but a new problem occurred. At this time, postcss does not take effect. Can you help me see this problem?

My repository: https://github.com/pdsuwwz/react-app

image in scss errors info:

scss error

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve 'assets/black-coffee.png' in '/Users/admin/Documents/zhike/github/myRepository/react-app/src/script/components/redux-test'
 at factory.create (/Users/admin/Documents/zhike/github/myRepository/react-app/node_modules/webpack/lib/Compilation.js:814:10)

postcss not working warning info:

[0] dll vendor 12 bytes vendor [built]
 + 82 hidden modules
 27% building modules 142/145 modules 3 active ..._modules/core-js/modules/_string-pad.jsYou did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
 49% building modules 333/336 modules 3 active ...ntime/helpers/interopRequireWildcard.jsYou did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

postcss not working warning

webpack.config.js

beginning:

module.exports = 
 mode: process.env.NODE_ENV,
 entry: 
 bundle: ['@babel/polyfill', './src/script/app.js'],
 ,
 output: 
 path: resolve('public'),
 filename: "bundle.js",
 ,
 performance: 
 hints: false
 ,
 module: 
 rules: [
 
 enforce: 'pre',
 test: /.(jsx?)$/,
 loader: 'eslint-loader',
 include: resolve('src'),
 options: 
 fix: true,
 cache: resolve('.cache/eslint'),
 failOnError: true,
 useEslintrc: true,
 configFile: resolve('.eslintrc.js'),
 formatter: require('eslint-friendly-formatter'),
 // baseConfig: 
 // extends: [resolve('.eslintrc.js')]
 // 
 
 ,
 jsx$/,
 exclude: /node_modules/,
 loader: "babel-loader"
 , 
 test: /.scss/,
 use: [MiniCssExtractPlugin.loader, "css-loader?modules&importLoaders=1&localIdentName=[name]_[local]_[hash:base64:5]", 
 loader: 'postcss-loader',
 options: ident: 'postcss', sourceMap: true, config: path: resolve('postcss.config.js') ,
 , "sass-loader"],
 exclude: resolve('node_modules'),
 include: resolve('src')
 , 
 test: /.css/,
 use: [MiniCssExtractPlugin.loader, "css-loader"],
 ,
 webp,
 
 test: /.(mp4,
 ttf]
 ,
 plugins: [
 new MiniCssExtractPlugin(
 filename: "[name].css",
 chunkFilename: "[id].css"
 ),
 new webpack.LoaderOptionsPlugin(
 minimize: true,
 ),
 new webpack.DllReferencePlugin(
 context: path.join(__dirname, '..'),
 manifest
 ),
 new FriendlyErrorsWebpackPlugin(
 clearConsole: false,
 onErrors: (severity, errors) => 
 if (severity !== 'error') 
 return;
 
 const error = errors[0];
 notifier.notify( '',
 );
 ,
 ),
 ],

end:

module.exports = 
 ...
 module: 
 rules: [
 ...
 jsx$/,
 exclude: /node_modules/,
 loader: "babel-loader"
 , 
 test: /.scss/,
 use: [MiniCssExtractPlugin.loader, "css-loader?modules&importLoaders=1&localIdentName=[name]_[local]_[hash:base64:5]", 
 loader: 'postcss-loader',
 options: ident: 'postcss', sourceMap: true, config: path: resolve('postcss.config.js') , publicPath: '../' ,
 , "sass-loader"],
 exclude: resolve('node_modules'),
 include: resolve('src')
 ,
 ...
 ]
 

.babelrc

 "presets": [
 [
 "@babel/preset-env",
 
 "targets": 
 "chrome": "58",
 "ie": "6"
 
 
 ],
 [
 "@babel/preset-react"
 ]
 ],
 "plugins": [
 "lodash",
 [
 "@babel/plugin-transform-runtime",
 
 "corejs": false,
 "helpers": true,
 "regenerator": true,
 "useESModules": false
 
 ],
 "@babel/plugin-syntax-dynamic-import",
 "@babel/plugin-syntax-import-meta",
 ["@babel/plugin-proposal-class-properties", "loose": true ],
 "@babel/plugin-proposal-json-strings",
 [
 "@babel/plugin-proposal-decorators",
 
 "legacy": true
 
 ],
 "@babel/plugin-proposal-function-sent",
 "@babel/plugin-proposal-export-default-from",
 "@babel/plugin-proposal-export-namespace-from",
 "@babel/plugin-proposal-numeric-separator",
 "@babel/plugin-proposal-throw-expressions",
 "@babel/plugin-transform-modules-commonjs",
 [
 "babel-plugin-react-css-modules",
 
 "generateScopedName": "[name]_[local]_[hash:base64:5]",
 "webpackHotModuleReloading": true,
 "filetypes": 
 ".scss": 
 "syntax": "postcss-scss"
 
 
 
 ],
 ["module-resolver", 
 "alias": 
 "@commMdule": "./src/styles",
 "@images": "./src/images"
 
 ]
 ]

postcss.config.js

module.exports = 
 plugins: [
 require("autoprefixer")( browsers: ['last 2 versions'] ),
 require("cssnano")()
 ]