Comments (3)
A solution that uses a workaround has been posted here:
bennypowers/rollup-plugin-lit-css#23
I'm also still trying to find out the right way to do it.
from rollup-plugin-styles.
The solution posted above does not seem to work anymore (at least for me) as it seems to target Lit 2.x.
I have analyzed the plugin code and its dependencies and my impression is that the documentation is misleading. It reads like you just need to add this and that module, add this and that line and it flies but it does not.
The underlying issue here is that rollup-plugin-lit-css
just processes pure CSS as
along with the other filter code completely ignores .scss
files by default and due to the hard-coded css
extension check and the missing support for transforming the id the whole construct just breaks.
You could fiddle something together by manually altering the files in the node_modules
folder so that it processes the files but then the plugin has no import of node-sass
or sass
whatsoever so the .scss
file would not be parsed correctly.
I think it must be a 3 step solution in rollup.config.js
like
plugins: [
styles({
mode: "emit"
}),
sassToCss(), // custom plugin that calls sass and compiles (aka transforms in terms of a plugin) the sass
litCss()
]
There are plugins that transform SASS to CSS but these are already working without rollup-plugin-styles
or rollup-plugin-lib-css
:
- https://github.com/ponday-dev/rollup-plugin-lit-sass
- https://gist.github.com/calebdwilliams/b3d6b2c2ca242e8aec5acafd0a532db2/revisions
But these are somewhat outdated as both still use node-sass
.
I still wonder how the tests in __tests__
can even run scss
imports. Perhaps the secret is buried there 🙄
from rollup-plugin-styles.
I have given up to solve this after multiple hours of searching the needle in the haystack.
You can use https://www.npmjs.com/package/@j1shin/rollup-plugin-lit-sass to achieve what you want, just follow the description of the package. All necessary steps are explained.
from rollup-plugin-styles.
Related Issues (20)
- Help to find which JS file included which CSS file
- Unexpected code splitting, possible feature request
- Support Parcel CSS as alternative to cssnano HOT 3
- Support importing style with query string HOT 1
- Scss @charset failing
- Separate css and .min.css files
- Is there a way to pass a style nonce property when the code injects the styles?
- Test fail due to cssnano
- [Feat request] customlize the image inline function
- Is it possible to use globs to import sass files?
- Prevent to add hash to referenced files inside CSS HOT 1
- Support for rollup v3 HOT 15
- CSS Injection into Server Side render (SSR) HOT 3
- [!] (plugin styles) Error: EACCES: permission denied, open '/.config/postcssrc' HOT 1
- Updating styles affects js file hash
- I would like to be able to freely define the export path.
- support lightningcss as an alternative to cssnano
- CSS input, emit raw output to file (no ES parsing)
- scss nesting not working with vue scoped style
- Hello, May I know if this project `rollup-plugin-styles` is still maintained? HOT 2
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 rollup-plugin-styles.