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

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

+1

@cvrebert
Copy link
Collaborator

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing a comma

@cvrebert
Copy link
Collaborator

Is this emerging standard/convention written down anywhere?

@techwraith
Copy link
Contributor Author

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

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

@techwraith
Copy link
Contributor Author

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

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

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

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 commented Jan 31, 2014

+1

1 similar comment
@bclinkinbeard
Copy link

+1

@techwraith
Copy link
Contributor Author

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

@cvrebert
Copy link
Collaborator

cvrebert commented Feb 3, 2014

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

cvrebert and others added 4 commits February 2, 2014 17:29
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 February 3, 2014 01:32
bclinkinbeard added a commit to bclinkinbeard/Leaflet that referenced this pull request 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 pull request Jan 14, 2016
heldr added a commit to heldr/slider that referenced this pull request 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
Development

Successfully merging this pull request may close these issues.

5 participants