I want to get raw string of css in npm module through vite.
According to vite manual,
https://vitejs.dev/guide/assets.html#importing-asset-as-string
It says we can get raw string by putting "?raw" at the end of identifier.
So I try this:
import style from "swiper/css/bundle?raw";
But this shows error like:
[vite] Internal server error: Missing "./css/bundle?raw" export in
"swiper" package
If I use this:
import style from "swiper/css/bundle";
There are no error, but css is not just load as string but handled as bundle css.
This is not good, because I want to use this css in my lit-based web components.
Are there any way to get css as raw string through vite?
Evan You (Vite.js and Vue.js creator) has added the inline toggle which fixes the problem of styles also being added to the main CSS bundle when importing.
import style from "swiper/css/bundle.css?inline";
This toggle prevents your CSS from also being bundled into you main CSS bundle as a side effect of importing it into a string.
Related
I'm working on a table component which one will be usable (included in a library when it will work correctly)in any of my projects.
As there is a lot of css rules related to this component I would like to put the style outside of the component svelte file.
What I did is writing a separate css file which I import in the component svelte file by :
import './table.css';
But in such a case I can see my rules in the built bundle.css file but these are not scoped to my component.
So I'm wondering if there is way of doing it as I would like or not....
yes, when svelte-preprocess is set up, you can use <style src="./table.css"></style> in the .svelte file
https://github.com/sveltejs/svelte-preprocess#external-files
...https://discord.com/channels/457912077277855764/945368391231864832/945369571680997416
I'm using a spreadsheet package called React-Datasheet installed with npm in my react.js project. The following instructions are found in the GitHub:
import ReactDataSheet from 'react-datasheet';
// Be sure to include styles at some point, probably during your bootstrapping
import 'react-datasheet/lib/react-datasheet.css';
When I compile the code the styling file does not compile with it. What is the method used to add the react-datasheet.css file?
The content currently renders like this:
How do I import the css file to result in a render that looks like this:
Just add this css in your index as what I found is it has further css
https://github.com/nadbm/react-datasheet/blob/master/docs/src/index.css
and add <div className={"sheet-container"}> class or div before rendering ReactDataSheet
When we import an image in react, we get its file path in the directory, and we can directly link it in the src attribute of an <img/> tag like so:
import some_icon from "../assets/images/some_icon"
and then :
<img src={some_icon}/>
here, some_icon contains the path of the image that can directly be used in the src attribute.
In the same way, I want to import just the file path of a css file and not the styles of the file.
Is there a way to do that?
Yes just import like this:
import "../assets/css/style.css";
and then the style will auto apply to what you're selecting in your css file.
Your question implies you are using a React-based framework that has webpack inbuilt, probably Create React App.
When you use import some_icon from "../assets/images/some_icon", what is actually happening is that the image-loader is going to fetch the image (some optimizations may occur where in some cases, a base-64 version of the image is fetched and in some cases the file is copied to the build folder and the new filename is used).
To get the CSS, I recommend importing like so import "../assets/css/style.css"; This is better than importing in the HTML file because the CSS loader may combine all the CSS files used in the project and the output will be one giant CSS file.
Using Webpacker I can load css files and they get output in the stylesheet pack files, but sometimes I'd like to access the CSS in these files from within javascript for use say in a WYSIWYG editor's config (specifying some extra styles for the IFRAME). The other option is to be able to access the public path of a css file loaded in like so:
import froala_style from '../../../css/froala.css'
My suspicion is that it's to do with the css loader that comes with Webpacker. Its job is to load the css and compile it out to a seperate file. I think that one can't have two css loaders at the same time? Could the answer be to apply filters to a custom loader so that it takes effect on only the file I'm wanting to load in as text or the path?
One can override the existing loaders for a particular import like so:
import froala_style from '!css-loader!../../../css/froala.css'
Prepending the ! overrides existing loaders allowing us to specify our own. In this example one can call froala_style.toString() to receive the contents of the CSS file.
For reference: https://webpack.js.org/concepts/loaders/#inline
The general error: SyntaxError: Invalid or unexpected token, referencing line 1 of index.css.
This is the result of encountering CSS syntax in a CSS file that I'm trying to import for styling.
Attempted fixes and experiments:
Deleted everything out of the CSS file and exported an empty JS module. This works, verifying that the import is treating it as a JS file, not CSS.
Removing the #import statement from line 1 of the CSS file. Of course, this fails to make a difference because the remaining CSS syntax throws the same error.
Paired down the Webpack config file to eliminate the surface area of the problem. Rendering should be handled by Webpack, so the issue may reside there. Config was very basic and set to handle CSS, SASS, JS, and JSX.
Tried importing the CSS file from other file locations, including the server's app.js file.
Tried making use of ExtractTextPlugin as an bundling alternative.
Tried making use of Isomorphic Style Loader.
All in all, given the attempted fixes and tests listed above, the issue seems unrelated to Webpack per se. It's as if the server side rendering is attempting to import the CSS file before Weback gets involved.
The fix, it turns out, was to use the ignore-styles package in our server app.js file:
require('ignore-styles')
The description as listed on the repo:
A babel/register style hook to ignore style imports when running in Node. This is for projects that use something like Webpack to enable CSS imports in JavaScript.