Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Path to sass-mq is dependent on specific node_modules location

See original GitHub issue

This line is causing us an issue:

https://github.com/alphagov/govuk-frontend/blob/ad2022ef044d2e67768199479e215f641e36cc5f/dist/components/globals/helpers/_media-queries.scss#L14

This assumes that sass-mq is installed in a node_modules folder relative to the root folder used by the Sass build system.

This isn’t always the case, e.g.

If Sass is configured to resolve links relative to file location rather than parent project root
If the parent project uses a different version of sass-mq to govuk-frontend, npm won’t flatten this dependency and the version needed by govuk-frontend actually lives in ./node_modules/govuk-frontend/node_modules/sass-mq govuk-frontend
if used in a monorepo (lerna, yarn workspaces) then node_modules are hoisted in to a parent directory.

I suspect this can be fixed by swapping it with @import "sass-mq/mq", which will leave node to deal with the module resolution.

Issue Analytics

State:
Created 5 years ago
Comments:17 (4 by maintainers)

Top GitHub Comments

2reactions

kr8n3rcommented, Apr 11, 2018

the proposed change in #637 should fix that https://github.com/alphagov/govuk-frontend/pull/637/files#diff-b47fe464b7770f8ba6b5ce3bf61eceb9R14

1reaction

kr8n3rcommented, Apr 19, 2018

@penx this will be fixed in the next release of Frontend

Top Results From Across the Web

Importing Sass through npm - node.js - Stack Overflow

scss|sass files inside the node_modules folder */ function npmModule(url, file, done) { // check if the path was already found and cached if(aliases[url])...

Sass MQ

Name your breakpoints in a way that creates a ubiquitous language across team members. It will improve communication between stakeholders, designers, ...

Introducing Sass Modules - CSS-Tricks

Sass just launched a major new feature you might recognize from other languages: a module system. This is a big step forward for...

mq-scss - npm Package Health Analysis - Snyk

npm install mq-scss --save. Import mq-scss at the top of your main Sass file (note that the exact path will differ depending on...

60 Using Webpack 4 and SASS with WordPress - YouTube

Using Webpack 4 and SASS with WordPress | bundle sass into css (from scratch) node -sass | sass-mq | sass-loader ----- SUBSCRIBE TO...