Ever since the beginning, you’d had to write or inject your CSS into , in order to style Polymer Components. At a time, Polymer did include the ability to import , although it was an experimental feature, and was deprecated in favor of style modules. With the recent version of Polymer 3, we ditch HTML (finally, no more silent errors 🎉!) in favor of good ol… er, I mean, good and new (ES2015 classes). HTML external stylesheets JavaScript Nonetheless, there’s a problem. Within HTML, we could get CSS support with our IDE or Text Editors. Writing them in a JavaScript makes it more difficult to static analyze and autocomplete our code. Fortunately, since it’s JavaScript, this means that we can tap into its powerful ecosystem, and use the tooling available to us. that creates the JavaScript styling for you, and “makes CSS great again” by just importing the CSS to the Polymer Component JavaScript file. polymer-css-loader is a Webpack Loader How to use Install the loader: npm install save-dev polymer-css-loader extract-loader css Or yarn add save-dev polymer-css-loader extract-loader css-loader -D Add it to your Webpack.config file: module.exports = {entry: './src/index.js',module: {rules: [{test: /**\. \.**s(c|a)ss$/,use: [{loader: 'polymer-css-loader',options: {minify: true, // defaults to false},}, 'extract-loader', 'css-loader', 'sass-loader'],},],},}; css| Note: You can use either sass-loader or less-loader. Leave polymer-css-loader for last. And import your css in your JavaScript Component file 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`<style include="style-1 maria"></style><p>This is the test component</p><p>This is the propertie's value: {{prop1}} </p><div>This font size should be bigger</div>`;} static get properties() {return {prop1: {type: String,value: 'polymer3-app',},};}} window.customElements.define('polymer-test-component', PolymerTestComponent); That’s it! The name of the file will be used for the <style include=””> Other Features Add a custom name for <style include=””> Add a custom name by adding at the end of the import . ?name= (Don’t use quotes “” for the value) import './style-1.scss?name=my-custom-style'; // Then:// Code omitted:static get template() {return html`<style include="my-custom-style"> </style> // Code omitted: Skip a css file You can skip a css file by adding at the end of the import. This the CSS into your Webpack Bundle, but it will not be parsed as a Polymer JavaScript styling file. ?skip will include import './style-1.scss?skip'; Skip all the files and explicitly include the ones you need Useful when you’re combining multiple libraries. This the CSS into your Webpack Bundle, but it will not be parsed as a Polymer JavaScript styling file. will include entry: './src/index.js',module: {rules: [{test: /**\. \.**s(c|a)ss$/,use: [{loader: 'polymer-css-loader',options: {minify: true, // defaults to falsedefaultSkip: true // will skip all the files css| },  
    }, 'extract-loader', 'css-loader', 'sass-loader'\],  
  },  
\], },}; Then, you’d use for the ones that you’d like to be parsed by the loader. ?include import './style-1.scss?include&name=my-custom-style'; // Will still be included, but not in the JavaScript// Polymer-Web Components fashionimport './style-2.scss' // Then:// Code omitted:static get template() {return html`<style include="my-custom-style"> </style> // Code omitted:

A dead simple Webpack 4 example with vanilla JavaScript (No Libraries and Frameworks)

Using Docker, Docker Compose, Angular-CLI 6+, Sass, and Pug (Jade)

SASS, LESS, CSS without JavaScript in Polymer 3 with Webpack

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A dead simple Webpack 4 example with vanilla JavaScript (No Libraries and Frameworks)

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

A dead simple Webpack 4 example with vanilla JavaScript (No Libraries and Frameworks)

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps