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 元素，因此样式应该通过以下方式使用 lit-element 的 css 函数部分声明

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

很高兴在这里见到你，萨卢多;)斯！

Answer 2

@k3llydev，我尝试了您的建议，但无法使其正常工作。您有什么建议吗，特别是当您说"正确配置的两个加载程序将允许您执行以下操作"时？我希望能够导入 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 加载器并可以直接使用导入的对象，那就是想法。有什么建议吗？

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