This is still an alpha release. While this may have worked well in my machine, there may still be unforeseen bugs and the API may change in the future.

polymer-css-loader

A loader for webpack that lets you "just import" the CSS into your JavaScript and automatically create the Styling JavaScript for you. This is intended for Polymer 3.

Install:

``
npm install save-dev polymer-css-loader extract-loader
`
Or
`
yarn add polymer-css-loader extract-loader -D
`

Requirements

* Polymer 3+ only!
* Webpack 4 (Tested, could work with earlier versions)

How this works:

1. Include it in your Webpack Config. Include it "last" or after all the loaders. You will need to use extract-loader if you're using sass-loader, less-loader and/or css-loader.

`javascript
module.exports = {
entry: './src/index.js',
module: {
rules: [
{
test: /\.css|\.s(c|a)ss$/,
use: [{
loader: 'polymer-css-loader',
options: {
minify: true, // defaults to false
},
}, 'extract-loader', 'css-loader', 'sass-loader'],
},
],
},
};
`
2. Include your .css or .scss or .less file in your JavaScript:
`javascript
import { html, PolymerElement } from '@polymer/polymer/polymer-element';

import './style-1.scss';
// The ?name will specify the name to be used in the include.
import './style-2.css?name=maria';
class PolymerTestComponent extends PolymerElement {
static get template() {
return html

This is the test component

This is the propertie's value: {{prop1}}

;
}

static get properties() {
return {
prop1: {
type: String,
value: 'polymer3-app',
},
};
}
}

window.customElements.define('polymer-test-component', PolymerTestComponent);
`
3. Use the base name of the file as the name for
}
`

Options

|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|minify|{Boolean}|false|When true, it Will minify both the CSS and JavaScript output.
|defaultSkip|{Boolean}|false|When true, Will minify both the CSS and JavaScript output.

Files Parameters

These are appended at the end of the CSS imports in your JavaScript file (Where the component is declared);
E.g:

`javascript
import './style-2.css?name=maria';
import './style-1.css?skip';
`

|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|name|{string}|false|Specifies a different name to be used in the include. For example if you do: import './style-2.css?name=maria';, you'd use maria like: