How to correctly load .pcss - postcss files with webpack? #580
Comments
|
You have problems with configuration and no one loader was applied, please provide full configuration or reproducible test repo and I will show how to fix |
|
Hi! This is the complete This is
Please tell me if something else is missing in order to understand how to fix the problem |
|
Can you put this in github repo? It will be easier to investigate |
|
Also |
|
I've created this github repo: https://github.com/raphael10-collab/PostcssLoaderElectronPlaying Steps to reproduce:
In the
|
|
Hello, sorry for delay, you don't have
|
|
Hi @alexander-akait ! Starting from the first option: I installed: In I still get this error message: What am I missing? And what do I have to fix in |
|
Use: const path = require('path');
const cwd = process.cwd();
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
function srcPaths(src) {
return path.join(__dirname, src);
}
const isEnvProduction = process.env.NODE_ENV === 'production';
const isEnvDevelopment = process.env.NODE_ENV === 'development';
// main process
var main_config = {
mode: isEnvProduction ? 'production' : 'development',
entry: './src/main/main.ts',
target: 'electron-main',
resolve: {
extensions: ['.jsx', '.js', 'ts'],
},
externals: [
{
'utf-8-validate': 'commonjs utf-8-validate',
bufferutil: 'commonjs bufferutil',
},
],
module: {
rules: [
{
test: /\.ts$/,
include: /src/,
use: [{ loader: 'ts-loader' }]
},
{
test: /\.(sass|less|css)$/i,
type: 'asset',
generator: {
outputPath: 'dist/assets/css/'
},
},
{
test: /\.s?css$/,
type: 'asset',
generator: {
outputPath: 'dist/assets/css/'
},
},
{
test: /\.pcss$/,
type: 'asset',
use: [
{ // https://github.com/webpack-contrib/postcss-loader#getting-started
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
"postcss-preset-env",
],
},
//sourceMap: true,
},
},
],
},
{
test: /\.(svg)$/i,
type: 'asset',
generator: {
outputPath: 'dist/assets/svg/'
},
},
{
test: /\.(png|jpe?g|gif)$/i,
type: 'asset',
generator: {
outputPath: 'dist/assets/pics/'
},
},
{
test: /\.geojson$/,
use: [
{
loader: "json-loader",
}
],
}
]
},
output: {
path: __dirname + '/dist',
filename: 'main.js'
},
node: {
__dirname: false,
__filename: false
},
};
// renderer process
var renderer_config = {
mode: isEnvProduction ? 'production' : 'development',
entry: {
app: ['./src/app/index.tsx', 'react-app-polyfill/stable'],
style: [
'./src/app/styles/index.css',
path.resolve(__dirname, 'node_modules/leaflet/dist/leaflet.css')
]
},
//target: 'electron-renderer',
//target: 'web',
target: ['web', 'es5'],
resolve: {
extensions: ['.jsx', '.js', '.tsx', '.ts'],
},
output: {
path: __dirname + '/dist/',
//filename: 'renderer.js'
filename: '[name].js',
},
externals: [
{
'utf-8-validate': 'commonjs utf-8-validate',
bufferutil: 'commonjs bufferutil',
},
],
module: {
rules: [
{
test: /\.(js|ts)x?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
// css files
test: /\.css$/i,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
],
},
{
test: /\.pcss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{ // 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,
},
},
],
},
{
test: /\.(svg)$/i,
type: 'asset',
generator: {
outputPath: 'dist/assets/svg/'
},
},
{
test: /\.(png|jpe?g|gif)$/i,
type: 'asset',
generator: {
outputPath: 'dist/assets/pics/'
},
},
{
// Font files
test: /\.(woff|woff2|ttf|otf)$/,
type: 'asset',
generator: {
outputPath: 'dist/assets/css/'
},
},
],
},
node: {
__dirname: false,
__filename: false
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/app/index.html',
inject:'body',
chunks: ['app'],
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
linkType: 'text/css',
}),
new CopyPlugin({
patterns: [
{
from: path.resolve(__dirname, "./src/assets/css"),
to: path.resolve(__dirname, "./dist/assets/css")
},
],
options: {
concurrency: 100,
},
}),
]
}
module.exports = [
main_config,
renderer_config,
]; |
|
Note I found |
|
Also copying assets without compiling them in in |
|
Thank you very much for your very kind help @alexander-akait i'm going to dive now into |
|
Unfortunately |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
As described in this
Stackoverflowpost : https://stackoverflow.com/questions/72118482/how-to-correctly-load-pcss-postcss-files-with-webpack, I'm having problems of loading.pcssfiles withwebpackPackages installed :
In
webpack.config.jsfile :But it still says:
I tried also in this way in
webpack.config.js:But I still get this error:
The
postcssfile is:Other info:
How to solve the problem?
The text was updated successfully, but these errors were encountered: