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.
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
import Radio from ‘preact-material-components/Radio’;
import FormField from ‘preact-material-components/FormField’;
import Button from ‘preact-material-components/Button’;
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:
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! email@example.com build: `webpack –env.production –config config/webpack`
npm ERR! Exit status 2
npm ERR! Failed at the firstname.lastname@example.org 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.