For a project, I'm using a library that I have built in order to share Vue components across the different applications.
So I import my component library as a npm module and I added it to the application package.json and that works fine.
The problem is that when I try to import something in the single component in the components library the application can't solve the dependencies of that component.
e.g component in the component library:
<template>
<!-- my html -->
</template>
</script>
// my script
</script>
<style scoped>
// here I import the basic style for the component:
#import "../../assets/base";
in the application package.json I have:
"components": "git+ssh://git#git.xxxxx.com:xxxxx/xxxxx/my-library.git#development",
and then I use the component normally in my project like this:
import MyComponent from "./components/MyComponent.vue";
The component library works fine, but when I import the component in the application I get the following error from webpack:
This dependency was not found:
* -!../../../../css-loader/index.js?sourceMap!../../assets/base in ./~/css-loader?sourceMap!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-28803148","scoped":true,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./~/components/src/core/MyComponent.vue
To install it, you can run: npm install --save -!../../../../css-loader/index.js?sourceMap!../../assets/base
Of course if I substitute the #import with the actual css needed everything works fine. How can I make this configuration works?
My bad, the error was simply not adding lang="scss" in the style declaration of the component:
<style scoped>
this should be:
<style scoped lang="scss">
Related
This is the first time I am publishing a Vue component to NPM and everything works fine, except the fact that the CSS is not present. It all works as expected when I run it locally but if I create a test project, install the npm package and import the component there is no CSS.
Steps to reproduce:
Create a new Vue project
run npm install elementable-vue
Use this template for App.vue: https://github.com/sandermaas/elementable-vue/blob/master/src/App.vue
Change the import (in the template) to import ElemenTable from 'elementable-vue'
run 'npm run serve'
You can check out the source code on https://github.com/sandermaas/elementable-vue
I can't figure out why this is not working so any help is very much appreciated.
You need to import your css as well in app.vue of your newly created project:
<style>
#import '~elementable-vue/dist/elementable-vue.css';
</style>
I've got a Laravel project, and am trying to use flatpickr in it as per the following page:
https://flatpickr.js.org/getting-started/
I was able to install flatpickr via npm i flatpickr --save and properly import it into the JS code and use it via import flatpickr from "flatpickr";, but my question is: How do I get the CSS into the project as well?
I ended up using the following HTML link tag referenced in the flatpickr docs link above:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
But I'm wondering if there is a better way to get the CSS for flatpickr into my project.
That is, when you use npm to install a package and import it into JS, is there something similar for the CSS, or are we required to include the CSS using a traditional link tag and that's our only option?
I couldn't find anything in the docs or via Google on how to do this, so I'm really left wondering. Thanks.
webpack.mix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js(['resources/js/app.js', 'node_modules/flatpickr/dist/flatpickr.js'], 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.stylus('node_modules/flatpickr/src/style/flatpickr.styl', 'public/css');
run npm run dev
results in js/app.js and css/flatpickr.css
...or you could just add
#import '~flatpickr/dist/flatpickr.css';
to
resources/sass/app.scss
and run
npm run dev
Then you get all of your css (Bootstrap/flatpickr) in one file public/css/app.css
Now March 2021, if using Laravel and the newer Laravel mix with npx mix and TailwindCSS, you may add flatpickr to app.css file with:
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
#import 'flatpickr/dist/flatpickr.css';
Note: All #import's must go before any other content in the app.css file.
I'm designing a React component to publish to NPM, and I'm unable to load a css file into my component. I get the error
Module not found: Error: Can't resolve './styles.css'.
I'm using relative pathing, and I'm sure the path is correct.
I've tried installing css-loader, styles-loader, and sass-loader, with no luck. I'm not using webpack either.
The line I'm using to import the CSS file in my component is
import './styles.css';
I'd like to know how one can import CSS files into React components?
I have a React component and I publish the component in NPM registry that I build with webpack. In my main project I consumed the component npm package JS like that:
import myComp from 'myComp';
The problem is that myComp also has CSS, that I build into dist/index.css with the help of webpack and ExtractTextPlugin (which builds all the css into one file).
And I want to consume the style like this:
import 'myComp/index.css';
Or
import 'myComp/index';
And in myComp npm package I want to expose it in a way that will support this import method.
NOTE: I don't want to import it directly from node_modules
import '../../../node_modules/myComp/index.css'; // bad
Thanks!
So it's easier than I thought, all you need to do is import the CSS like that (as I did in the question):
import 'myComp/dist/style.css';
And make sure your tools (browserify/webpack etc..) can handle loading css into your javascript file.
So the issue was more related to the building process.
Also, if you want to push specific code into npm registry you can use "files" inside package.json. This way you'll end up with just the files you need in npm registry.
files: [
"dist/*.css"
]
You can also use tools like:
https://github.com/rotundasoftware/parcelify - for browserify
https://www.npmjs.com/package/parcelify-loader - for webpack
But I didn't like them. It forces a dependency on the consumer of your npm package.
In my meteor 1.3 and React apps, when I try to use a jquery plugin, it won't work. On the console, I always see an error saying the function is not defined. For example, Uncaught TypeError: $(...).countdown is not a function. Earlier I added the js files in the header like this in a index.html file (Placed in the app's root):
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.1.0/jquery.countdown.min.js"></script>
</head>
But since Meteor 1.3 moved all js to the footer, now I load them inside the body tag in the same index file. Now the files are loaded and the jquery plugins can find jQuery without issues. But have trouble using them in the react components. I wrap my functions inside componentDidMount and $(document).ready. But it's not working. Any idea why?
Have you tried installing it as an npm package?
As of 1.3 Meteor supports modules and NPM packages:
http://guide.meteor.com/1.3-migration.html#modules
meteor npm install --save jquery-countdown
Package URL: https://www.npmjs.com/package/jquery-countdown
Then import the dependency where you need it.
Not 100% sure on the import:
import 'jquery-countdown';
or something like:
import {countdown} from 'jquery-countdown'