Menu icon Foundation
Relative path problems loading scss in Zurb Starter Project

Hi,

I might be doing something I shouldn't be doing (mixing frameworks), but i'm actually trying to load some of the material design components into my zurb starter project.

The basic idea was to use the MDC textfields instead of the standard foundation textfields.

So I installed the MDC textfields:

npm install @material/[email protected]

Added the mdc-text-field scss import to the app.scss.

@import 'settings';
@import 'foundation';
@import 'motion-ui';

//import material design components.
@import '@material/textfield/mdc-text-field';

 

But here I started running into problems, since it could not find the scss.
(was located in the node_modules/@material folder)

After a quick read, I found out that I needed to add the PATH to the config.yml, the same way I had done with the font awesome pro setup.

  # Paths to Sass libraries, which can then be loaded with @import
  sass:
    - "node_modules/foundation-sites/scss"
    - "node_modules/motion-ui/src"
    - "node_modules/@fortawesome/fontawesome-pro/scss"
    - "node_modules/@material"

and a quick update to app.scss:

//import material design components.
@import 'textfield/mdc-text-field';

and now it works... until mdc-text-field then tries to @import "@material/animation/variables"; which is located in: node_modules/@material/animation/_variables.scss

 

Andhere i'm stuck. Been trying to google my way out of it, reading stuff. But everyone says I need to add it to my relative path. But looking at all the examples they are providing, I can't figure out how to do it the foundation zurb way :(

like this one from:
https://github.com/material-components/material-components-web/issues/351

  { loader: 'sass-loader',
    options: {
      includePaths: ['node_modules', 'node_modules/@material/*']
        .map((d) => path.join(__dirname, d))
        .map((g) => glob.sync(g))
        .reduce((a, c) => a.concat(c), [])
    }
  }

which lead me to try the following in config.yml:

  # Paths to Sass libraries, which can then be loaded with @import
  sass:
    - "node_modules"
    - "node_modules/foundation-sites/scss"
    - "node_modules/motion-ui/src"
    - "node_modules/@fortawesome/fontawesome-pro/scss"
    - "node_modules/@material/*"

But it still didn't work. So any foundation/webpack genius can help me figure this one out? Much appreciated.

importscssconfig.ymlmdcnpm

Hi,

I might be doing something I shouldn't be doing (mixing frameworks), but i'm actually trying to load some of the material design components into my zurb starter project.

The basic idea was to use the MDC textfields instead of the standard foundation textfields.

So I installed the MDC textfields:

npm install @material/[email protected]

Added the mdc-text-field scss import to the app.scss.

@import 'settings';
@import 'foundation';
@import 'motion-ui';

//import material design components.
@import '@material/textfield/mdc-text-field';

 

But here I started running into problems, since it could not find the scss.
(was located in the node_modules/@material folder)

After a quick read, I found out that I needed to add the PATH to the config.yml, the same way I had done with the font awesome pro setup.

  # Paths to Sass libraries, which can then be loaded with @import
  sass:
    - "node_modules/foundation-sites/scss"
    - "node_modules/motion-ui/src"
    - "node_modules/@fortawesome/fontawesome-pro/scss"
    - "node_modules/@material"

and a quick update to app.scss:

//import material design components.
@import 'textfield/mdc-text-field';

and now it works... until mdc-text-field then tries to @import "@material/animation/variables"; which is located in: node_modules/@material/animation/_variables.scss

 

Andhere i'm stuck. Been trying to google my way out of it, reading stuff. But everyone says I need to add it to my relative path. But looking at all the examples they are providing, I can't figure out how to do it the foundation zurb way :(

like this one from:
https://github.com/material-components/material-components-web/issues/351

  { loader: 'sass-loader',
    options: {
      includePaths: ['node_modules', 'node_modules/@material/*']
        .map((d) => path.join(__dirname, d))
        .map((g) => glob.sync(g))
        .reduce((a, c) => a.concat(c), [])
    }
  }

which lead me to try the following in config.yml:

  # Paths to Sass libraries, which can then be loaded with @import
  sass:
    - "node_modules"
    - "node_modules/foundation-sites/scss"
    - "node_modules/motion-ui/src"
    - "node_modules/@fortawesome/fontawesome-pro/scss"
    - "node_modules/@material/*"

But it still didn't work. So any foundation/webpack genius can help me figure this one out? Much appreciated.

This post has been closed. No new replies can be added.

Daniel Nyman 11 months ago

Got it working with the following:

  # Paths to Sass libraries, which can then be loaded with @import
  sass:
    - "node_modules"
    - "node_modules/foundation-sites/scss"
    - "node_modules/motion-ui/src"
    - "node_modules/@fortawesome/fontawesome-pro/scss"

And remember to restart.