CSS 使用 webpack 进入 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，因此 styles 应该使用 css function 部分的 lit-element 声明如下

import {css} from 'lit-element';

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

有什么方法可以将 css 代码生成为字符串并将其粘贴到 js 文件中？

Answer 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;;)

Answer 2

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

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 并且可以直接使用导入的 object，那将是个好主意。 有什么建议么？

这种方式应该符合原始海报的要求，一种将 CSS 作为字符串并在您的 LitElement 中使用的方法。