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

Allow the bootstrap package in npm to expose css #12441

Closed
wants to merge 7 commits into from

Conversation

@techwraith
Copy link
Contributor

@techwraith techwraith commented Jan 30, 2014

Many modules in npm are starting to expose their css entry files in their package.json files. This allows tools like npm-css, rework-npm, and npm-less to import bootstrap from the node_modules directory.

Many modules in npm are starting to expose their css entry files in their `package.json` files. This allows tools like `npm-css`, `rework-npm`, and `npm-less` to import bootstrap from the node_modules directory.
@OscarGodson
Copy link

@OscarGodson OscarGodson commented Jan 30, 2014

+1

@cvrebert
Copy link
Collaborator

@cvrebert cvrebert commented Jan 30, 2014

This omits bootstrap-theme.css and all of our Less files...

@@ -11,6 +11,7 @@
"scripts": {
"test": "grunt test"
},
"style": "./dist/css/bootstrap.css"
Copy link
Collaborator

@cvrebert cvrebert Jan 30, 2014

Missing a comma

@cvrebert
Copy link
Collaborator

@cvrebert cvrebert commented Jan 30, 2014

Is this emerging standard/convention written down anywhere?

@techwraith
Copy link
Contributor Author

@techwraith techwraith commented Jan 30, 2014

Sorry, for missing the comma on that one, I'll fix it. :)

It's actually not written anywhere but in the code for these modules right now. We're hoping to get this standardized at some point, but we've all reached this convention separately, so I'm inclined to just go with it.

Yes, this does omit those. But the theme is optional, and most of these tools allow you to do things like:

@import "bootstrap/dist/css/bootstrap-theme.css";

Here are some links to those modules:

https://github.com/defunctzombie/npm-css
https://github.com/conradz/rework-npm
https://github.com/Raynos/npm-less

If you want to read about this style of css development, I wrote a thing:

http://techwraith.com/your-css-needs-a-dependency-graph-too.html

@cvrebert
Copy link
Collaborator

@cvrebert cvrebert commented Jan 30, 2014

Wouldn't npm-less presumably want to know about the Less files as opposed to the compiled CSS?

@techwraith
Copy link
Contributor Author

@techwraith techwraith commented Jan 30, 2014

They would, but they aren't the majority case here. They'd still be able to do the work around that I showed above.

@techwraith
Copy link
Contributor Author

@techwraith techwraith commented Jan 30, 2014

Also, atomify-css is working on a system that would allow you to use both less and compiled css in the same project. That way you can write your code in less, but some dependencies that you'd like to use could be standard css.

@techwraith
Copy link
Contributor Author

@techwraith techwraith commented Jan 30, 2014

I just submitted a pull request to npm-less that would solve this problem, but it would require module authors who would like to provide both a compiled css file and a less file to define two properties on their package.json: Raynos/npm-less#2

If that gets merged in, I'll add a less property to bootstrap's package.json file.

@techwraith
Copy link
Contributor Author

@techwraith techwraith commented Jan 30, 2014

Ok, looks like Raynos/npm-less#2 was merged, so I updated this PR to allow for less to be imported if you're using npm-less.

@shama
Copy link
Contributor

@shama shama commented Jan 31, 2014

+1

1 similar comment
@bclinkinbeard
Copy link

@bclinkinbeard bclinkinbeard commented Jan 31, 2014

+1

@techwraith
Copy link
Contributor Author

@techwraith techwraith commented Feb 3, 2014

Any thoughts on this one yet? I'd really like to see this land :)

@cvrebert
Copy link
Collaborator

@cvrebert cvrebert commented Feb 3, 2014

/cc @mdo
@techwraith Can you squash this into a single commit?

cvrebert and others added 4 commits Feb 3, 2014
Many modules in npm are starting to expose their css entry files in their `package.json` files. This allows tools like `npm-css`, `rework-npm`, and `npm-less` to import bootstrap from the node_modules directory.
@techwraith techwraith closed this Feb 3, 2014
@techwraith techwraith deleted the patch-1 branch Feb 3, 2014
bclinkinbeard added a commit to bclinkinbeard/Leaflet that referenced this issue Feb 3, 2014
Many modules in npm are starting to expose their css entry files in their package.json files. This allows tools like `npm-css`, `rework-npm`, and `npm-less` to import a module's styles from the node_modules directory. Bootstrap is [in the process](twbs/bootstrap#12441) of adopting this standard as well.
colllin added a commit to colllin/ionicons that referenced this issue Jan 14, 2016
heldr added a commit to heldr/slider that referenced this issue Jul 27, 2016
Many modules in npm are starting to expose their css entry files in their `package.json` files. This allows tools like `postcss-import`, `parcelify`, `npm-css`, `rework-npm` and `npm-less` to import *rc-slider* straight from node_modules directory.

Example:
```css
@import 'rc-slider';
```

Reference:
twbs/bootstrap#12441
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

5 participants