Material-components-web: [Question] Using "material-components-web" without npm [compile with sass]

[gomarcus]

Found the smashing material components web project on github. Unfortunately I have some problems with integrating this material collection into my project. I'm unfortunately not very good with sass/scss, so it was not possible for me to create the desired css files. Is there a way to "compile" the project files without npm?

[Garbee]

You can use the unpkg CDN as detailed in the Getting Started guide. However doing a local build yourself without node and all is not something that is supported.

[acdvorak]

Just to clarify, is there a specific reason you need to compile the .scss files (e.g., to change theme colors)? Or do you just want the default pre-compiled CSS that we distribute via npm (but without using npm)?

If you only need the pre-compiled CSS and don't plan to customize the Sass in any way, @Garbee's suggestion of using the unpkg CDN is probably the way to go. If you are unable to use a CDN for some reason (e.g., restrictive corporate intranet), you could simply download the CSS files and copy them to your project (though this would obviously make it harder to get our updated CSS whenever we release a new version).

If you _do_ need to compile the .scss files, but you don't want to use our npm package, you can install the sass binary and manually compile from our GitHub repo on the command line. However, you would still need to use the npm binary initialize the symlinks needed for import paths to resolve correctly:

git clone https://github.com/material-components/material-components-web.git
cd material-components-web
npm install
sass --scss --load-path packages/material-components-web/node_modules \
  packages/material-components-web/material-components-web.scss \
  > path/to/output/material-components-web.css

Also, be aware that our build pipeline uses an autoprefixer to add the necessary vendor prefixes for CSS properties (e.g., appearance: none becomes -webkit-appearance: none), so if you compile the CSS manually, you won't get those vendor prefixes, and some styles may appear broken on certain browsers.

Does this help answer your question?

[gomarcus]

@acdvorak @Garbee I would like to thank you very much for all the information you send my. I'm sorry that I did not responded faster, I had to experience the unspeakable. No internet connection :D
@acdvorak Many thanks also for the usefull commands for SASS and NPM, I would otherwise had to read documentation for hours.

[leudis]

Hi, My Name is Leudis and by new on material use. I tried to install material menu component and this fail.
sudo npm install @material/menu
npm WARN [email protected] requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] || 2.x.x but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/watchpack/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/karma/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/dart-sass/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

• @material/[email protected]
  updated 1 package and audited 26927 packages in 18.225s
  found 0 vulnerabilities

[Garbee]

@leudis

1) You should not install things with sudo. That's very bad practice.
2) Can you please point out the "failure"? I see nothing in the log you shared that fails. Perhaps if you looked into what the warnings mean, you'd understand why they are warnings and not failures. The package should still work just fine once you get everything configured right to build.

[leudis]

Sorry. I deleted everything and clone everything back to start from scratch. Now I put this command to install it (npm i material-components-web) and the following is what I get:

[email protected] install /home/leudis/material-components-web/node_modules/canvas

node-pre-gyp install --fallback-to-build

node-pre-gyp WARN Using request for node-pre-gyp https download
node-pre-gyp WARN Tried to download(404): https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.2.0/canvas-prebuilt-v2.2.0-node-v72-linux-glibc-x64.tar.gz
node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v72 ABI, glibc) (falling back to source compile with node-gyp)
/bin/sh: 1: pkg-config: not found
gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 127 while in binding.gyp. while trying to load binding.gyp
gyp ERR! configure error
gyp ERR! stack Error: gyp failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:345:16)
gyp ERR! stack at ChildProcess.emit (events.js:196:13)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:256:12)
gyp ERR! System Linux 4.15.0-20-generic
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--module=/home/leudis/material-components-web/node_modules/canvas/build/Release/canvas-prebuilt.node" "--module_name=canvas-prebuilt" "--module_path=/home/leudis/material-components-web/node_modules/canvas/build/Release" "--napi_version=4" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v72"
gyp ERR! cwd /home/leudis/material-components-web/node_modules/canvas
gyp ERR! node -v v12.1.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/home/leudis/material-components-web/node_modules/canvas/build/Release/canvas-prebuilt.node --module_name=canvas-prebuilt --module_path=/home/leudis/material-components-web/node_modules/canvas/build/Release --napi_version=4 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v72' (1)
node-pre-gyp ERR! stack at ChildProcess. (/home/leudis/material-components-web/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack at ChildProcess.emit (events.js:196:13)
node-pre-gyp ERR! stack at maybeClose (internal/child_process.js:1000:16)
node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:267:5)
node-pre-gyp ERR! System Linux 4.15.0-20-generic
node-pre-gyp ERR! command "/usr/local/bin/node" "/home/leudis/material-components-web/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd /home/leudis/material-components-web/node_modules/canvas
node-pre-gyp ERR! node -v v12.1.0
node-pre-gyp ERR! node-pre-gyp -v v0.11.0
node-pre-gyp ERR! not ok
Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/home/leudis/material-components-web/node_modules/canvas/build/Release/canvas-prebuilt.node --module_name=canvas-prebuilt --module_path=/home/leudis/material-components-web/node_modules/canvas/build/Release --napi_version=4 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v72' (1)
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: node-pre-gyp install --fallback-to-build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install 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! /home/leudis/.npm/_logs/2019-05-27T12_14_54_345Z-debug.log

this is the log file:
2019-05-27T12_14_54_345Z-debug.log

[Garbee]

So that's a canvas package install problem. I'd look in their help and old issues for assistance. Perhaps you're running an unsupported version of Linux and need to install some packages to allow the module to be compiled on-the-fly? My best guess. But the problem isn't related to MCW, but a package used within it not installing on your system.