使用 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!;)