Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sass imports of node_modules do not work when building #197

Closed
peXed opened this issue Apr 21, 2018 · 6 comments
Closed

Sass imports of node_modules do not work when building #197

peXed opened this issue Apr 21, 2018 · 6 comments
Labels
type: bug Something isn't working

Comments

@peXed
Copy link

peXed commented Apr 21, 2018

  • Your OS: Windows 10
  • Node.js version: 8.10.0
  • VuePress version: 0.6.1
  • Browser version: Chrome 65
  • Is this a global or local install?: local
  • Which package manager did you use for the install?: yarn

Bug:
If you import sass files from a node_module it will work on the dev server, but it fails when building the project.

Steps to reproduce:

  1. clone repo: https://github.com/peXed/vuepress-test
  2. run yarn docs:build and you will get the following error:
    File to import not found or unreadable: ~bulma.
  3. run yarn docs:dev and everything will work as expected

Expected behavior:
Importing node_modules works when building the project as well.

@ulivz ulivz added the type: bug Something isn't working label Apr 21, 2018
@gaven
Copy link

gaven commented Apr 22, 2018

@ulivz - would you mind if I took a look at this?

@ulivz
Copy link
Member

ulivz commented Apr 24, 2018

You just used a wrong import path but didn't set any alias:

  @import "~bulma";

remove the ~ instead.

@ulivz ulivz closed this as completed Apr 24, 2018
@peXed
Copy link
Author

peXed commented Apr 24, 2018

@ulivz unfortunatly, this is not fixing the issue.

The prefix ~ should be fine, because it tells Webpack that this is not a relative path (for more information see: https://github.com/webpack-contrib/sass-loader#imports).
With the prefix the import works great in development (without the prefix, you will get an error message).
But during the build process, the import is not working.
I guess this may be an webpack issue, not finding the node_modules anymore?

Can we reopen the issue?

@skjnldsv
Copy link

skjnldsv commented May 15, 2019

Hey! This is still not fixed.
@ulivz look at the docs: https://github.com/webpack-contrib/sass-loader#imports
@import ~xxxx IS valid :)

@beatgrabe
Copy link

beatgrabe commented Oct 25, 2019

Hmm facing the same issue now. Are there any solutions or any hints why this problem exists?

To give an idea about my actual problem, I have something like this in my enhanceApp.js file:

import './styles.sass'

export default ({
  Vue,
  options,
  router,
  siteData
}) => {

}

I added the node-sass and sass-loader packages to preprocess the sass. On running vuepress dev docs the sass rules are included, but on running vuepress build docs there are not.

@anlexN
Copy link

anlexN commented Nov 2, 2019

i don’t want to use any framework integration or wrapper!
How to use material-components-web?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: bug Something isn't working
Projects
None yet
Development

No branches or pull requests

6 participants