繁体   English   中英

CSS 使用 webpack 进入 JS

CSS into JS using webpack

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

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

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

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

5 如何使用webpack-mix生成JS和CSS?

我有一个用于构建某种静态页面的目录项目,我完成了webpack-mix和npm packages安装,因此如何初始化并正确使用此软件包以从依赖项生成所有JS和CSS。 我确实发现了一些有关webpack的问题,但我不知道webpack-mix是否相同。 ...

6 如何使用Webpack独立捆绑JS和CSS文件?

我有一些JS和SCSS文件。 我需要Webpack 4将每个JS条目捆绑到一个JS文件中,并且将每个SCSS条目捆绑到一个CSS文件中。 JS文件不会导入SCSS文件。 我尝试使用以下webpack.config.js来做到这webpack.config.js : 它工作正常,We ...

8 使用webpack和一个配置捆绑CSS和JS

我试图了解webpack的工作原理。 我正在开发Wordpress主题,因此决定尝试Webpack。 我正在为Webpack进行配置。 配置它来处理SASS相当容易,但是要增加对应捆绑到一个JS文件中的JS文件的支持: scripts.js ,那么就很难理解它的工作原理。 那是我 ...

9 使用webpack从js组件中提取CSS

我正在使用React并使用每个组件拆分CSS。 我想从这些文件中提取CSS。 在这种情况下,我如何提取并捆绑ComponentA.css和ComponentB.css 没有转换整个JS源? ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM