CSS 使用 webpack 进入 JS

Question

I`m trying to paste a CSS Code into a JS File using webpack

My flux is the following

SASS file > CSS content > PostCSS > css file

     {
        test: /\.(sass|scss)$/,
        exclude: /node_modules/,
        use: [
          MiniCSSExtractPlugin.loader, 
          'css-loader',
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              sassOptions: {
                outputStyle: 'compressed'
              }
            }
          }
        ]
      }

But the MiniCSSExtractPlugin gets me the content into a css file.

I'm use Lit Element so the styles should be declare with css function part of lit-element on the following way

import {css} from 'lit-element';

export default css`
  :host {
    display: inline;
  }
`;

Is there any way to generate css code as a string and paste it into js file?

Answer 1

To import a CSS file into JS (w/webpack) you need to configure webpack with the following loaders:

• css-loader
• style-loader

Both available with NPM:

$ npm i css-loader style-loader --save-dev

And add this entry to the module.rules array in your webpack configuration:

{
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader'
  ]
}

---

The result

Both of this loaders correctly configured will allow you to do the following sentence in JavaScript:

import myStyles from './your-css-file.css';

And then, you can just paste them into literal templates as follows:

static get styles() {
   return css`${myStyles}`;
}

Additionally:

With a deep knowledge into what you might be talking about, you might need to take a look around @cells/cells-cli files and add those loaders into webpack configuration. Otherwise, you may need to create a webpack.config.js file in every lit-element component, which might not be the best for the current architecture.

Nice to see you around here, ¡saludos;;)

Answer 2

@k3llydev, I tried your suggestion and couldn't get it to work. Do you have any suggestions, specifically when you say "both of these loaders correctly configured will allow you to do the following"? I'd like to be able to import the CSS and then use it directly in the styles getter like you show in your example, but I had to do this as a workaround:

import MyImportedStyle from './some.css';

static get styles () {
    return [
        css`${unsafeCSS(MyImportedStyle.toString())}`
    ];
}

While using the 'to-string-loader' in webpack:

{
    test: /\.css$/i,
    use: ['to-string-loader', 'css-loader'],
}

This worked out for me and did what I wanted, but if I could avoid using the to-string-loader and could use the imported object directly, that would be idea. Any suggestions?

This way should do what the original poster asked for, a way to get the CSS as a string and use it in your LitElement.