Hello,
I have a problem to implement kendo material theme.
package.json:
webpack.config.js:
I have a problem to implement kendo material theme.
package.json:
"dependencies": {
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@fluentui/react": "^8.68.2",
"@fluentui/web-components": "^2.5.1",
"@mui/material": "^5.9.1",
"@pnp/common": "^2.13.0",
"@pnp/logging": "^3.3.2",
"@pnp/odata": "^2.13.0",
"@pnp/sp": "^3.3.2",
"@progress/kendo-data-query": "^1.6.0",
"@progress/kendo-drawing": "^1.17.1",
"@progress/kendo-licensing": "^1.2.2",
"@progress/kendo-react-animation": "^5.5.0",
"@progress/kendo-react-buttons": "^5.5.0",
"@progress/kendo-react-data-tools": "^5.5.0",
"@progress/kendo-react-dateinputs": "^5.5.0",
"@progress/kendo-react-dialogs": "^5.7.0",
"@progress/kendo-react-dropdowns": "^5.5.0",
"@progress/kendo-react-form": "^5.7.0",
"@progress/kendo-react-grid": "^5.5.0",
"@progress/kendo-react-inputs": "^5.5.0",
"@progress/kendo-react-intl": "^5.5.0",
"@progress/kendo-react-listbox": "^5.5.0",
"@progress/kendo-react-treeview": "^5.5.0",
"@progress/kendo-theme-material": "^5.6.0",
"antd": "^4.21.7",
"axios": "^0.27.2",
"bootstrap": "^4.3.1",
"concurrently": "^7.2.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"moment-timezone": "^0.5.34",
"node-sass": "^6.0.1",
"postcss-calc": "^8.2.4",
"react": "^18.2.0",
"react-bootstrap": "^2.4.0",
"react-dom": "^18.2.0",
"react-dual-listbox": "^2.2.0",
"react-router": "^6.3.0",
"react-router-dom": "^5.3.0",
"react-scripts": "3.1.1",
"redux": "^4.2.0",
"sp-pnp-js": "^3.0.10",
"sp-rest-proxy": "^3.3.3",
"style-loader": "^2.0.0",
"styled-components": "^4.3.2",
"uuid": "^8.3.2"
},
"devDependencies": {
"@babel/core": "^7.13.10",
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/preset-env": "^7.13.10",
"@babel/preset-react": "^7.12.13",
"babel-loader": "^8.2.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"body-parser": "1.19.0",
"css-loader": "^5.2.7",
"gulp-sass": "^5.1.0",
"html-webpack-plugin": "4.5.2",
"less": "^4.1.3",
"less-loader": "^5.0.0",
"postcss": "^8.4.16",
"postcss-loader": "^4.0.0",
"sass": "^1.55.0",
"sass-loader": "^10",
"webpack": "^4.39.1",
"webpack-cli": "^4",
"webpack-dev-server": "3.11.2"
},
webpack.config.js:
/// <binding BeforeBuild='Run - Development' />
/** @type {import('webpack').Configuration} */
const path = require("path");
const webpack = require("webpack"); // to access built-in plugins
const HtmlWebpackPlugin = require("html-webpack-plugin");
var config = {
// bundling mode
mode: "none",
watch: false,
devServer: {
contentBase: path.resolve(__dirname, "lib"),
},
// the app entry point is /src/index.js
entry: path.resolve(__dirname, "src", "index.js"),
output: {
// the output of the webpack build will be in /dist directory
path: path.resolve(__dirname, "lib"),
// the filename of the JS bundle will be bundle.js
filename: "index.js",
libraryTarget: "umd",
},
// file resolutions
resolve: {
extensions: [".js", ".css"],
},
// loaders
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: "babel-loader"
},
{
test: /\.css$/i,
use: ['css-loader', 'css-loader',
{
loader: 'postcss-loader',
options: {
precision: 10,
plugins: [
require('autoprefixer')(),
require('postcss-calc')()
]
}
},
// Compiles Sass to CSS
{
loader: 'sass-loader',
options: {
implementation: require('node-sass'),
// implementation: require('dart-sass'),
sassOptions: {
precision: 10,
// fiber: require('fibers')
}
}
}
],
},
{
test: /\.less$/i,
use: [
// compiles Less to CSS
"style-loader",
"css-loader",
"less-loader",
],
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
],
},
devtool: "source-map", //old value:none
plugins: [
new webpack.ProgressPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src", "index.html"),
}),
],
optimization: {
splitChunks: {
// include all types of chunks
chunks: "all",
},
},
};
module.exports = (env, argv) => {
if (argv.mode === "development") {
config.devtool = "source-map";
}
if (argv.mode === "production") {
config.devtool = "cheap-source-map";
}
return config;
};
1 Answer, 1 is accepted
0
Hello, Millan,
I researched the thrown error and it seems that the `postcss-loader` comes with a little bit different options syntax now and the `plugins` has to be passed to the `postcssOptions` options. Please note that one of the "css-loader" params has to be replaced with `style-loader` as well, you can find details on this matter in the link below:
https://webpack.js.org/loaders/postcss-loader/
For example, you can update the `postcss-loader` rule based on the information above in a similar way:
module: {
rules: [
...
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions:
{
plugins: [
require('autoprefixer')(),
require('postcss-calc')()
]
}
}
}Please, give it a try and let me know what is the result you get after that.
Regards,
Vessy
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.