drdreo / lit-scss-loader Goto Github PK
View Code? Open in Web Editor NEWA webpack loader that automatically generates the JavaScript style that is required for LitElement, simply by importing the CSS/SCSS file.
License: MIT License
A webpack loader that automatically generates the JavaScript style that is required for LitElement, simply by importing the CSS/SCSS file.
License: MIT License
Is there an NPM release anytime soon? There is pretty much a very old version on NPM with wrong commands. And the readMe on Github is much sweeter as well.
Hi there,
thank you so much for this great plugin. Everything works fine when developing components with lit-element and scss. I'd love to make use of storybook.js. When I start and build the storybook, an error says that SCSS can't be imported as a javascript module.
Failed to load module script: The server responded with a non-JavaScript MIME type of "text/x-scss". Strict MIME type checking is enforced for module scripts per HTML spec.
My components import the SCSS like so:
import MwButtonStyles from './_mw-button.scss';
export class MwButton extends LitElement {
static get styles() {
return [ MwButtonStyles ]
}
I even tried to do stuff like this in a _mw-button.js which I've imported to the lit-component then:
import MwButtonStyles from './_mw-button.scss';
export default MwButtonStyles;
and then import it again… but it doesn't work either for the same reason.
Do you have any pointers?
Thank you!
Are you planning on publishing it as an NPM in the nearest time? Thanks for this!
With the new Lit I'm getting The main 'lit-element' module entrypoint is deprecated. Please update your imports to use the 'lit' package: 'lit' and 'lit/decorators.ts' or import from 'lit-element/lit-element.ts'.
warning.
To update to new lit I have this in my package.json:
"lit": "^2.0.0-rc.1", "lit-element": "^3.0.0-rc.1",
Setting up minify option to true
removing svg properties cx
, cy
, r
.
I think this behaviour coming from clean-css@v4
package
var CleanCSS = require('clean-css');
var input = `
.test {
cx: 0.5em;
cy: 0.5em;
fill: none;
r: 0.2em;
}
`;
var options = { /* options */ };
var output = new CleanCSS(options).minify(input);
console.log(output.styles);
By changing it to clean-css version 5, should fix this issue
When using the basic instructions with a Typescript project, tsc will complain:
TS2307: Cannot find module './style.scss' or its corresponding type declarations.
This is because Typescript doesn't think it can load SCSS files (even though Webpack makes that possible). It's necessary to trick Typescript into not complaining. This can be done by
global.d.ts
file (or any declaration file really) like so:declare module '*.scss';
{
"compilerOptions": {
...
},
"include": [
"path/to/global.d.ts"
]
}
With that in place it should work properly.
Hi there, it's a wonderful solution to include SCSS files into LitElement.
Are there any plans on supporting Webpack 5 in the future?
import {css} from 'lit-element'; export default css`:host{...}`
The backticks cause an error IE11. Would it be possible to use quotes here?
If I add content rule to SCSS file, e.g.:
&::before {
content: '\2014';
}
Result from scss processing will be empty <style></style>
tag.
Hi,
Really like this package - it made our lives much easier when looking support scss in lit. Thanks for your contribution!
Just a suggestion, as I recently spent a few hours trying to add ie11 support to a lit-based project; ended up discovering it was the extract-loader
in this package which was converting scss -> js
and was being ignored by our babel-loader
. It was particularly confusing because older browsers give no context to the error and just shows a lit-element css.ts file (which I assume is being imported in templateGenerator.js
via generateCSSImport
) as being the cause of the issue.
Normally your babel-loader config looks something like this:
module: {
rules: [
{
test: /\.js$|\.ts$/,
use: {
loader: 'babel-loader',
....
Was able to resolve the issue by simply doing the following
module: {
rules: [
{
test: /\.js$|\.ts$|\.s(c|a)ss$/,
use: {
loader: 'babel-loader',
There might be other ways to do this, but it def could save future users some time if they are using with tools like babel. Thanks!
Hi there,
I already had a couple of SCSS loader rules defined in my webpack.config.js
and wanted to install lit-scss-loader. This was the original file:
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader', // inject CSS to page
}, {
loader: 'css-loader', // translates CSS into CommonJS modules
}, {
loader: 'postcss-loader', // Run post css actions
}, {
loader: 'sass-loader' // compiles Sass to CSS
}]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader',
],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader',
],
},
]
},
plugins: [
new HtmlWebPackPlugin( {
template: "./src/index.html",
filename: "./index.html"
}),
]
}
Then I added the following block below (that's how I've understood your instructions):
{
test: /\.css|\.s(c|a)ss$/,
use: [{
loader: 'lit-scss-loader',
options: {
minify: true, // defaults to false
},
}, 'extract-loader', 'css-loader', 'sass-loader'],
},
And now I'm getting the following error:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: property "css" must be followed by a ':'
on line 1 of src/styles/main.scss
>> import {css} from 'lit-element'; export default css`@import url(https://font
--------^
@ ./src/styles/main.scss 2:26-390
@ ./src/index.js
I think I misconfigured webpack and these SCSS rules need to be merged somehow. But I have no idea how. Can I kindly ask you for some pointers? :-)
Thank you!
Requiring webpack 5 instead of webpack 4 was a breaking change. It should be accompanied by increasing the major version and not the minor. Projects depending on ^1.0.0 of lit-css-loader got broken unexpectedly, when you rele3ased 1.1.0. Many other projects did the upgrade to webpack 5 properly (copy-webpack-plugin, css-loader, sass-loader, style-loader, ...).
How about fixing the problem by retaining the webpack 4 support in the 1.x releases and introducing the webpack 5 support in 2.x releases? For example:
1.1.1 - you could republish the 1.0.1 with the webpack 4 support to fix the 1.1.0
2.0.0 - you could republish the current 1.1.0 content as 2.0.0
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.