This article is a “Getting Started” – the very first steps of how to start a PreactJS project offline and include Material Design CSS Library or Components.
First You should have installed on your system the module required for all “modern” JavaScript frameworks – NodeJS and/or npm.
Next, You should follow the steps from the PreactJS Site. From a command line console, execute:
npm install -g preact-cli
preact create default my-cool-project
cd my-cool-project
npm run dev (actually preact places a “watch” argument development setting) – npm run watch
develop your app – code/code/code
npm run build
Before the run dev/run watch phase, if you plan to use material components with preact, you could execute:
npm -i -D preact-material-components
And in your component, you could include on the top - the JavaScript components definition and the CSS files.
import Radio from 'preact-material-components/Radio';
import FormField from 'preact-material-components/FormField';
import Button from 'preact-material-components/Button';
import 'preact-material-components/Radio/style.css';
import 'preact-material-components/FormField/style.css';
import 'preact-material-components/Button/style.css';
One last thing before you start developing is to include the setting that will actually handle the included CSS files in the import section of your components. Otherwise they’ll not get styled and will default to whatever the browser or your other CSS provide.
You know, Preact is one of the many frameworks that does its thing on non–fully JS code to produce JS. The framework includes JSX to JS and the sass|scsss to CSS processors, but it seems it misses to handle CSS ready includes by default (at least at time of writing this article).
Search the webpack.js file located in the config folder under the root folder of your project. There you could find a section with:
module: {
rules: [{ …. }, {
test: /.(sass|scss)$/,
} ….
Include the CSS in this list : (sass|scss|css)$/,
After that, your material components should get styled as expected at least during the development phase.
Unfortunately, after trying to build for production I've got an error:
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! preact-starter@1.4.0 build: webpack --env.production --config config/webpack
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the preact-starter@1.4.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! ~[my_home]/.npm/_logs/2020-12-10T22_03_51_434Z-debug.log
If somebody can give me an idea, I'll be very grateful.
Top comments (0)