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-loader can't resolve patternfly transitive dependencies #426

Closed
rascio opened this issue Apr 2, 2017 · 2 comments
Closed

sass-loader can't resolve patternfly transitive dependencies #426

rascio opened this issue Apr 2, 2017 · 2 comments

Comments

@rascio
Copy link

rascio commented Apr 2, 2017

Hi!
I'm trying to setup a basic skeleton for a project. I would like to use patternfly-sass in my project, but I'm having bad time trying to setup it.
The problem seems to be in the sass files of patternfly, and for what I tried it seems that I need to modify that files to make it works, but maybe some magic trick exists.
I setup the sass loader in this way:

{
    test: /\.(scss|sass)$/,
    use: extractSass.extract({
      use: [{
          loader: "style-loader" // creates style nodes from JS strings
      }, {
          loader: "css-loader" // translates CSS into CommonJS
      }, {
          loader: "sass-loader", // compiles Sass to CSS,
          options: {
            includePaths: [path.resolve(__dirname, "node_modules")]
          }
      }]
    })
}

The I have in my main.scss:

@import '~patternfly-sass/assets/stylesheets/patternfly'

When I compile I have the following error:

File to import not found or unreadable: bootstrap/variables.
Parent style sheet: /Users/rascio/Projects/site-skeleton/node_modules/patternfly-sass/assets/stylesheets/_patternfly.scss
  in /Users/rascio/Projects/site-skeleton/node_modules/patternfly-sass/assets/stylesheets/_patternfly.scss (line 3, column 1)
 @ ./~/vue-style-loader!./~/css-loader?minimize!./~/vue-loader/lib/style-compiler?{"id":"data-v-356299a0","scoped":false,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./private/src/App.vue 4:14-325
 @ ./private/src/App.vue
 @ ./private/main.js

In the _patternfly.scss:

// PatternFly SASS
@import "patternfly/variables";
@import "bootstrap/variables";
@import "patternfly/fonts";
@import "bootstrap/mixins";
@import "patternfly/mixin_overrides";
@import "bootstrap/normalize";

Patternfly doesn't have any bootstrap folder in the source so it can resolve the modules dependencies without the using of the prefix ~, meanwhile with my configuration I have to put it.

I don't get why I need to use the prefix to make it works and they don't?

Can I change something to use the patternly-sass module?

@alexander-akait
Copy link
Member

@rascio your can use https://github.com/sass/node-sass#importer--v200---experimental for this. THis is not related to sass-loader, some libraries add variable to define here search dependencies package or assets (your can create issue about this and do pr in patternfly). Sorry but seems won't fix in sass-loader.

@alexander-akait
Copy link
Member

@rascio seems duplicate #227.

Closing this out, please feel free to reopen if this doesn't related to your issue. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants