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

5.0.0-rc.90 : Bower SCSS problem #2611

Closed
Sly777 opened this issue Sep 17, 2015 · 11 comments
Closed

5.0.0-rc.90 : Bower SCSS problem #2611

Sly777 opened this issue Sep 17, 2015 · 11 comments

Comments

@Sly777
Copy link

Sly777 commented Sep 17, 2015

Hey,

In video-js.scss file, It's trying to import "../../node_modules/videojs-font/scss/icons" file but it doesn't create node_modules folder in Bower. When you try to import videojs.scss file to another scss, it doesnt work.

@heff
Copy link
Member

heff commented Sep 18, 2015

We're still trying to figure out the best way to handle the sass files and understand how they'll be used. What specifically were hoping to use the sass files to do?

@Sly777
Copy link
Author

Sly777 commented Sep 21, 2015

hey @heff,

Mostly, i'm importing plugin scss files with sass import function (you can see example code below). After that, i'm importing this file to my general scss file. For information, i just import one time.

Example code:

/// _thirdParty.scss

// BOOTSTRAP 3 BASE FILES
@import "../../../libraries/bootstrap-sass/assets/stylesheets/bootstrap/variables";
@import "../../../libraries/bootstrap-sass/assets/stylesheets/bootstrap/mixins";

// SETTINGS
$body-bg: $colors-dark-blue-grey;
$text-color: $colors-white;
$grid-columns: 15;
$grid-gutterRight: floor(($grid-gutter-width / 2));
$grid-gutterLeft: ceil(($grid-gutter-width / 2));

// BOOTSTRAP 3 BASE FILES
@import "../../../libraries/bootstrap-sass/assets/stylesheets/bootstrap/normalize";
@import "../../../libraries/bootstrap-sass/assets/stylesheets/bootstrap/print";

@import "../../../libraries/bootstrap-sass/assets/stylesheets/bootstrap/scaffolding";
@import "../../../libraries/bootstrap-sass/assets/stylesheets/bootstrap/type";
@import "../../../libraries/bootstrap-sass/assets/stylesheets/bootstrap/grid";

@import "../../../libraries/bootstrap-sass/assets/stylesheets/bootstrap/utilities";
@import "../../../libraries/bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";

// SELECT2 FILES
@import "../../../libraries/select2/src/scss/core";

// VIDEO.JS FILES
//@import "../../../libraries/video.js/src/css/video-js";
/// main.scss

@import "thirdParty";

/// other codes.....

Only problem in this scenario is font files of videojs. If work on the different folders and when you send files to production you do compile or something, you cannot use the font files directly so maybe you can create another repo for that (with bower support). When i work with gulp or grunt, i always copy necessary files to production side with copy function of them.

@heff
Copy link
Member

heff commented Sep 21, 2015

@mmcc any new thoughts on this?

@mmcc
Copy link
Member

mmcc commented Sep 21, 2015

This scenario is why I was leaning towards the idea of outputting the compiled css as just an SCSS file for scenarios like this. The problem is we're basically doing the same thing, but we're expecting to be able to pull from node_modules (which would also work with anyone else using npm and not bower). We could copy the font scss over like the font files, but that feels a bit hacky.

@open-cipher
Copy link

Shouldn't the main property in bower.json point to the dist folder with compiled css rather than the src folder with the scss file ?

@gkatsev
Copy link
Member

gkatsev commented Oct 12, 2015

It probably should, since that's what we're doing the styles property of the package.json.

@arpu
Copy link

arpu commented Oct 23, 2015

+1

@nguyenDalex
Copy link
Contributor

1+

@mmcc
Copy link
Member

mmcc commented Oct 30, 2015

No need to continue the +1s, this is confirmed.

@misteroneill
Copy link
Member

Going to also note that this really breaks with npm 3.x because it installs dependencies as siblings instead of as nested node_modules directories - meaning the ../../node_modules/videojs-font/scss/icons path breaks anything that tries to compile an .scss file from video.js as a node module.

To reproduce, make sure you have npm 3 running and:

npm install video.js
node-sass node_modules/video.js/src/css/video-js.scss

Should yield:

{
  "formatted": "Error: file to import not found or unreadable: ../../node_modules/videojs-font/scss/icons\n       Current dir: ~/dev/test/node_modules/video.js/src/css/\n        on line 5 of node_modules/video.js/src/css/video-js.scss\n>> @import \"../../node_modules/videojs-font/scss/icons\";\n   --------^\n",
  "message": "file to import not found or unreadable: ../../node_modules/videojs-font/scss/icons\nCurrent dir: ~/dev/test/node_modules/video.js/src/css/",
  "column": 9,
  "line": 5,
  "file": "~/dev/test/node_modules/video.js/src/css/video-js.scss",
  "status": 1
}

@gkatsev
Copy link
Member

gkatsev commented Nov 17, 2015

Closing in favor of #2740 since it has a PR out for it: #2775

@gkatsev gkatsev closed this as completed Nov 17, 2015
@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 27, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

8 participants