【问题标题】：CSS into JS using webpack使用 webpack 将 CSS 转换为 JS
【发布时间】：2020-01-19 22:07:30
【问题描述】：

我正在尝试使用 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文件中？

【问题讨论】：

标签： javascript css webpack styles lit-element

【解决方案1】：

要将 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 配置中。否则，您可能需要在每个 lit-element 组件中创建一个webpack.config.js 文件，这可能不是当前架构的最佳选择。

很高兴在这里见到你，¡saludos！;)

【讨论】：

【解决方案2】：

@k3llydev，我尝试了您的建议，但无法实现。您有什么建议，特别是当您说“正确配置的这两个加载器都允许您执行以下操作”时？我希望能够导入 CSS，然后直接在样式获取器中使用它，就像您在示例中显示的那样，但我必须这样做作为一种解决方法：

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 中使用的方式。

【讨论】：