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