I see repositories like bootstrap starting to include additional tags in their package.json file such as 'style' and 'less.' How can I use these tags to import assets?
package.json
{
"name": "bootstrap",
"style": "dist/css/bootstrap.css",
"sass": "scss/bootstrap.scss",
"main": "./dist/js/npm"
}
I am using ES6 modules and webpack. I want to do be able to import my stylesheets using the style tag in package.json.
Currently I am doing something like this:
my_stylesheets.less
#import "~bootstrap/dist/css/bootstrap";
which is annoying for consumers to add the path when it is available in package.json. Is there a way I can import stylesheets using the tag in package.json?
If I cannot use the tag in package.json, is there a standard way of importing stylesheets in ES6 modules?
Yes!!! Webpack treats everything as a module, including that cute little package.json in your repo.
Therefore, you simply need to require() it into your app and then access properties from that json object. (See json-loader for more info).
I often use this to import data like version number etc for my Webpack config file for bundling and versioning.
This feature is not included in webpack for now. There is an open issue about this in webpack's CSS loader repo.
There is also an SO thread on the use of the style field, and it seems that there are some npm / browserify tools that support this.
Related
Since version 4.x of SonataAdminBundle all assets are handled using NPM and WebPack.
In my project I also have some assets and JS libraries and I'm also using NPM and WebPack.
What should I do in this case? For example, SonataAdminBundle uses libraries such as jQuery, Bootstrap, but I also use them (in my package.json).
One of the ideas that came to my mind is to import the main "app.js" file (vendor/sonata-project/admin-bundle/assets/js/app.js) from SonataAdminBundle which contains all the required components to run to my main "app.js" file and then import my other additional libraries and assets. Next, I would then copy all the dependencies from the SonataAdminBundle package.json file (vendor/sonata-project/admin-bundle/package.json) and paste it into my package.json file.
I am not sure if this approach is correct.
The downside of this solution would be to compare the package.json files after each update of the SonataAdminBundle library and apply any changes.
Do you have other ideas to solve this problem?
I was told by the project manager at the company I work for to take all the global components of a vue project we're working on and turning them into a single npm package that anyone working on the project can import and start using. essentially I have to take the global components and turn them into a component library like vuetify which is installed using npm and than imported from node modules directory.
I was wondering if you guys could point me in the right direction on how to achieve this. thanks in advance.
So, regardless of the implementation, the main thing you need is following this guide on how to create an npm package
https://docs.npmjs.com/creating-and-publishing-private-packages
Then
You create an src folder.
In the src, you will create a folder named "components" with all your -duh- components.
In the src folder, you will also create an index.js file, from there you will export your components.
export { default as VDataTable } from './components/VDataTable.vue'
// ...etc
Option1
If you use a bundler for your projects, and you know by a fact that all your codebases will use a bundler, you can simply create a folder with a package.json.
In your package.json then you will
"module": "src/index.js",
"main": "src/index.js"
In this scenario, you are letting your main project bundler (which is using the package) transpile all the packages for you, (babel, single file components)
Option 2
In case you have absolutely no clue of the nature of the projects which can use your library you will need a bundler for your components.
An example can be Rollup.
I suggest these 2 guides.
https://rollupjs.org/
https://rollup-plugin-vue.vuejs.org/
Long story short, Rollup will transpile for you the files you requested (js and css), and you will have to make them available from your package.json
"module": "src/dist/library.esm.js",
"main": "src/library.common.js"
And then you can release your package. Possibly privately or you might get fired :P
Can i use bootstrap in a vue project along side sass. Is there any way to use bootstrap classes with pug.
I have tried to install bootstrap using this tutorial:https://travishorn.com/adding-bootstrap-to-a-vue-cli-project-98c2a30e0ed0
when i add the following commands in main.js file.
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
It is giving me:
No PostCSS Config found in: /home/sidra/gekko/node_modules/bootstrap/dist/css
at /home/sidra/gekko/web/vue/node_modules/postcss-load-config/index.js:51:26
I think I might be late with my answer, but I will answer, anyway, because I had the same issue today.
The idea is that package.json is storing your PostCSS configuration. So, you need to at least add PostCSS options key if it wasn't set yet:
"postcss": {
"options": {},
"plugins": {
"autoprefixer": {}
}
}
UPD: by the way, I think this type of error appears with external CSS only and pug might not be related.
How can a .vue file (as a parent component with child .vue files) be published to npm so that you can install, require, and use it as a component with browserify as
let component = require('published-vue-component');
I only use browserify; I don't use webpack at all. I thus bundle all .vue files into a single build.js using a vueify transform. All of the information I see currently about this either a.) reads that you should export your main .vue file (doesn't work) or b.) involves webpack.
If you go ahead and bundle the component with a vueify transform and set "main": "the/bundle/path/index.js", it seems that a vueify transform can't work without a template rendering function and thus isn't intended for single components.
If you simply export the parent .vue file, when you require the component you're going to get a syntax error from the first character of the <template> tag.
If you bundle your component as a umd module, then you can import it into browserify or webpack. Use rollup and this plugin: http://vuejs.github.io/rollup-plugin-vue/
I ran into this issue with my vue-autosuggest library, where browserify users were experiencing issues importing my module.
Check out this example rollup config for inspiration:
https://github.com/Educents/vue-autosuggest/blob/master/build/rollup.umd.config.js
Hope this helps!
I have this really simple webpack projects in with I now want to also use bulma a css framework.
I installed the package via npm i bulma and tried to include it inside my app.js-file using the following snipped unsuccessfully:
import bulma from '~bulma/bulma.sass';
I also tried using a specific sass part, which also did not work:
import bulma from '~bulma/sass/base/_all';
Can you help me get this working or maybe point me in the right direction?
You need to update your webpack config file so the sass loader also processes sass files, not only scss files.
Change this line:
test: /\.scss$/, to test: /\.(sass|scss)$/