使用 webpack 将 CSS 转换为 JS

Question

我正在尝试使用 webpack 将 CSS 代码粘贴到 JS 文件中

我的通量如下

SASS 文件 > CSS 内容 > PostCSS > css 文件

     {

        test: /\.(sass|scss)$/,

        exclude: /node_modules/,

        use: [

          MiniCSSExtractPlugin.loader, 

          'css-loader',

          'postcss-loader',

          {

            loader: 'sass-loader',

            options: {

              sourceMap: true,

              sassOptions: {

                outputStyle: 'compressed'

              }

            }

          }

        ]

      }

但是 MiniCSSExtractPlugin 将内容放入 css 文件中。

我正在使用 Lit Element，因此应按以下方式使用 lit-element 的 css 函数部分声明样式

import {css} from 'lit-element';

export default css`

  :host {

    display: inline;

  }

`;

有没有办法将css代码生成为字符串并将其粘贴到js文件中？

Answer 1

我尝试了您的建议，但无法让它发挥作用。您有什么建议，特别是当您说“正确配置这两个加载程序都将允许您执行以下操作”时？我希望能够导入 CSS，然后像您在示例中显示的那样直接在样式 getter 中使用它，但我不得不这样做作为一种解决方法：import MyImportedStyle from './some.css';static get styles () {    return [        css`${unsafeCSS(MyImportedStyle.toString())}`    ];}在 webpack 中使用 'to-string-loader' 时：{    test: /\.css$/i,    use: ['to-string-loader', 'css-loader'],}这对我来说很有效并且做了我想要的，但是如果我可以避免使用 to-string-loader 并且可以直接使用导入的对象，那将是一个主意。有什么建议？这种方式应该满足原始海报的要求，一种将 CSS 作为字符串获取并在您的 LitElement 中使用的方法。

Answer 2

要将 CSS 文件导入 JS (w/webpack)，您需要使用以下加载器配置 webpack：css加载器样式加载器两者都可用于 NPM：$ npm i css-loader style-loader --save-dev并将此条目添加到 webpack 配置中的 module.rules 数组：{  test: /\.css$/,  use: [    'style-loader',    'css-loader'  ]}结果正确配置的这两个加载器将允许您在 JavaScript 中执行以下语句：import myStyles from './your-css-file.css';然后，您可以将它们粘贴到文字模板中，如下所示：static get styles() {   return css`${myStyles}`;}此外：深入了解您可能在谈论的内容后，您可能需要查看@cells/cells-cli文件并将这些加载器添加到 webpack 配置中。否则，您可能需要webpack.config.js在每个 lit-element 组件中创建一个文件，这可能不是当前架构的最佳选择。很高兴在这里见到你，¡saludos!;)