Sage 9 and Material Components for Web

sage
1

Hello,

I am having trouble importing Material Components for Web in Sage 9 using the included webpack.config.js.

My main.scss: @import "~@material/animation/mdc-animation";@import "~@material/button/mdc-bu - Pastebin.com

When I try to run yarn build. I’m getting this error:
File to import not found or unreadable: @material/animation/mdc-animation.

The issue have already been documented using a similar setup as Sage 9 there:
https://github.com/material-components/material-components-web/issues/351

TLDR solution to fix this issue:

You need to make sure you include the path to the material modules in your sass-loader config

The problem is that I’m not able to implement the solution suggested in the link within Sage webpack.config.js. Throughout my google research, I have found a solution that work but only if I remove ${sourceMapQueryStr}

    {
        test: /\.scss$/,
        include: config.paths.assets,
        use: ExtractTextPlugin.extract({
            fallback: 'style',
            publicPath: '../',
            use: [
                `css?${sourceMapQueryStr}`,
                'postcss',
                `resolve-url?${sourceMapQueryStr}`,
                `sass?&includePaths[]=${path.resolve(__dirname, '../../node_modules')}`,
            ],
        }),
    },

If I use this line instead:

sass?${sourceMapQueryStr}&includePaths[]=${path.resolve(__dirname, '../../node_modules')},`

I’m getting this error:

Error: Invalid mapping: {"generated":{"line":11440,"column":0},"source":"C:/www/project.dev/site/web/app/themes/sage/assets/styles/C:\\www\\project.dev\\site\\web\\app\\themes\\sage/assets\\styles\\node_modules\\@material\\theme\\_mixins.scss","original":{"line":94,"column":-1},"name":null}

My knowledge of NodeJS and Webpack is pretty limited since usually “it just works” so I think it’s as far as I’m going to get without external help.

If anyone with good understanding of what’s going on and what need to be done to properly import Material Components for Web using Sage 9 webpack.config.js could point me in the right direction, I’de appreciate the help.

2

I’m also trying to make it working without success. Did you come to any solution eventually?

3

No modification to webpack.config.js is necessary, just use relative path and /dist:

@import “…/…/…/node_modules/material-components-web/dist/material-components-web”;

1 Like
4

Hi, I’m trying set up Sage to use Material Components. I have got the .css & .js files to import from the /dist folder in the component directory using relative paths, the suggestion made by @areay, but when I look at themeing it looks like I can only update the styles by writing code in standard CSS. I would like to be able to utilise SASS if possible.

Is there a way to reference the @material/ components in webpack so I dont have to use the relative paths? I have searched but only found suggestions for Sage 9 beta. I’m using Sage 9.0.9 on a 64bit Windows 7 machine.

Thanks in advance. Any help would be much appreciated.

5

I try to set up MDC-Web before and it worked. I have to change how to import sass from node_modules.
import ‘~@material/typography/mdc-typography’
will not work, so i change it to
import ‘@material/typography/mdc-typography’
and it work.

To do this, you have to change sass loader options in webpack.config.js. Add this line
includePaths: ['./node_modules'],. This is how it look:
loader: ‘sass’,
options: {
sourceMap: config.enabled.sourceMaps,
sourceComments: true,
includePaths: [’./node_modules’],
},

Finally, you also need to change how to import local sass file.
Before
@import ‘common/variables’;
After
@import ‘./common/variables’;
And do this to other local sass file as well.

That’s it. I hope it will be help. Sorry for my bad english.

1 Like
6

That just saved us alot of time, thank you alot! We actually used the following line

@import "material-components-web/material-components-web.scss";

This will import all MDC components, so the initial filesize will be quite large. Will later pipe it either through PurifyCSS or PurgeCSS, so that shouldn’t be a problem