Comments (7)
Tbf I might just have a messed up config, this seems to work:
{
test: /\.lit.css$/,
use: [
"lit-css-loader",
{loader: "postcss-loader", options: postcssLoaderOptions}
]
},
from lit-css.
Okay, so I think my real problem is that my url("img/foo.svg")
isn't handled.
For my usual css, I'm using this:
{
test: /\.lit.css$/,
use: [
"lit-css-loader",
{loader: "postcss-loader", options: postcssLoaderOptions}
]
},
But using css-loader or extract-loader breaks lit-css-loader.
Do you have any advice for this? I assume it is a common concern and would be interesting to others, too.
Sorry for thinking aloud in this issue, if you prefer I can gather my thoughts and open a new one.
from lit-css.
I appreciate you walking through the issue, thanks
Can you elaborate on what is happening? a small reproduction case with expected output would be good
from lit-css.
I'll look into it when I have a little time, shouldn't be too long.
from lit-css.
Hey i have the same issue, I know that the url(...) inside of css literals can be resolved using
something like :
import logo from "./src/images/logo.png
.image {
background: url(${ unsafeCss( logo ) });
}
yourFile.d.ts
declare module "*.png" {
const val : any;
export default val;
}
When the loader transpile the code to const style = css...
; the url is ommited and the problem is there i think
from lit-css.
@MartinEmanuelMaldonado93 can you use the transform config property to transform those calls?
from lit-css.
Hey ! has been past few days and I realize that the loader works very well actually, i make the mistake because i misunderstood the webpack url behaviour when compiles.
In my webpack.common.js i wrote that the output of my assets be written to the absolute path called "./assets" and in all of my css styles when i required i write url("./assets/myimage.png") and i solve the problem, i don't know if i was clear, but that is the solution i used for my little issue with url's thank you for your answers!
from lit-css.
Related Issues (12)
- Angular and React examples HOT 8
- Use with create-react-app HOT 3
- CSS Modules / Import Assertions HOT 3
- Unable to perform just-in-time compilation of Tailwind CSS HOT 2
- Please provide a project template for vite HOT 1
- cjs files are not present in npm package HOT 1
- Replacing uglifycss HOT 3
- any support for Parcel ? S ample package.json configuration would be appreciated HOT 4
- Add support for esbuild 0.18.x HOT 3
- TS error due to missing `css` property in rollup plugin options
- [esbuild-plugin-lit-css] need esbuild v0.13.4 support HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lit-css.