标签: css-loader

我在我的项目中使用webpack和less-loader，在我的webpack配置中，我试图传递一个全局变量以在我的less文件中使用。该部分配置如下：

module: {
    loaders: [
        {
            test: /\.less$/,
            loader: 'style!css!less?'+JSON.stringify(
                {globalVars: {staticDir: config.staticDir}}
            )
        }
    ]
}

我上面引用的配置文件是下面的json文件：

{
    "staticDir": "'https://myendpoint.com'"
}

以下是使用此staticDir全局变量的less文件的一部分（我们称其为file.less）：

button.slick-prev {
    left: 5px;

    &:before {
        url('@{staticDir}/images/some_image.svg');
    }
}

但是，当我的资产捆绑在一起时，会出现以下错误：

ERROR in ./~/css-loader!./~/less-loader?{"globalVars":{"staticDir":"'https:/myendpoint.com'"}}!./path/to/file.less
Module not found: Error: Cannot resolve 'file' or 'directory' ./https:/myendpoint.com/images/some_image.svg in /Users/me/myprojects
 @ ./~/css-loader!./~/less-loader?{"globalVars":{"staticDir":"'https:/myendpoint.com'"}}!./path/to/file.less 7:217947-218035

我正在尝试调试的两个错误：

• 根据错误我的配置值https://myendpoint.com被解析为https:/myendpoint.com
• less-loader正在将我的端点解析为相对目录

当我将端点硬编码到less文件中时，webpack会很好地打包我的资产。

最后一点：我staticDir在配置中设置为，"'https://myendpoint.com'"因为与绑定会"https://myendpoint.com"产生Module build failed: Unrecognised input错误。

我正在使用带有css-loader的webpack.一切都工作得很好,除了我不知道如何使用jQuery选择一个css-loader转换类.转换后的类名称看起来像"src-styleauthTextboxLeft1Npf4",具有以下css-loader配置:

css?sourceMap&modules&importLoaders=1&localIdentName=[path][name]__[local]__[hash:base64:5]'

这是React代码

const Auth = (props) => {
  const toggle = (event) => {
    // Working example
    $('#container').css('background', 'blue');

    // Not working
    $(styleCSS.container).css('background', 'green');
  };
  return (
    <div id="container" className={styleCSS.container} onClick={toggle} />
  );
};

反正有没有让第二个选择的作品？

我想将一个特定的选择器全局附加到我的应用程序中使用的所有 CSS 选择器。

我正在使用 React 和那些 Webpack 加载器post-css、css-loader和sass-loader。extract-text-webpack-plugin

我不想编辑 jsx 文件中的所有类名。我只想在构建时附加这个特定的选择器。

有没有一个加载器可以实现这一点？或者任何其他解决方案...

我实际拥有的：

.myClass {
  ...

  &--blue { ... }
}

Webpack 转译后我想要的：

.specificClass .myClass { ... }
.specificClass .myClass--blue { ... }

谢谢

戈蒂埃

PS：我需要此功能的原因是为了避免 CSS 选择器与我正在集成应用程序的网站发生冲突。我不想手动编辑所有 scss 文件来附加选择器。

根据 webapck 官方文档，webpack 使用名为 css-loader 的加载器将指定的 CSS 文件导入到 JavaScript 模块中。

这个过程有什么好处呢？你怎么能不采用使用 link 标签将 CSS 文件链接到 html 的老式方法呢？

我正在为CSS 使用css-loader，style-loader但所有媒体查询均无法正常工作。我使用"webpack": "^3.4.1"，"css-loader": "^0.28.4"和"style-loader": "^0.18.2"。

这是我的Webpack配置：

const ExtractTextPlugin = require('extract-text-webpack-plugin')

rules: [{
  test: /\.css$/,
  use: [{
    loader: 'style-loader'
  }, {
    loader: 'css-loader',
    options: {
      modules: true,
      localIdentName: '[name]-[local]-[hash:base64:6]',
      camelCase: true
    }
  }]
}]
...
plugins: [
  new ExtractTextPlugin({
    filename: 'style.[chunkhash:6].css',
    allChunks: true
  })
]

我的css文件是这样的：

.container{
  position: relative;
  margin: 30px 15px;
  padding: 50px 15px;
  background: #fff;
}
@media (max-width: 768px) {
  .container{
    background: #fbfbfb;
  }
}

我正在这样的React代码中导入此CSS文件：

import …

我正在将next.js（7.0.2）添加到现有项目中，无法弄清为什么Link模块不加载具有的页面import 'style.css'。

我遵循了@ zeit / next-css指令以及Next.js / Express集成。

我安装了以下软件包

• 下一个7.0.2
• @ zeit / next-css
• css-loader@1.0.1
• 快报（v4）

next.config.js

    // ./next.config.js file
    const withCSS = require('@zeit/next-css')
    module.exports = withCSS() 

index.js

    // ./pages/index.js file
    import Link from 'next/link'
    const Index = () => (
      <div>
        <p>Hello Next.js</p>
        <p>
          <Link href="/test"><a>test</a></Link>
        </p>
      </div>
    )

    export default Index

test.js

    // ./pages/test.js file
    import "../style.css"
    export default () => <div className="example">Hello World!</div>

style.css

    // ./style.css file
      .example {
        font-size: 50px; …

我正在开发一个小部件，它可以嵌入“任何”网站上，并使用 css-loader 为我的 CSS 类提供唯一的名称以避免冲突。

在我的 webpack.config.js 中，我有以下行：

localIdentName: 'productname-[folder]-[local]',

这输出类名如下：

• 产品名称-src-widgetbox
• 产品名称-Sidebar-sidebar

是否可以从类名中删除所有“-src”并将所有内容小写？

我找到了一个解决方案，我只是复制了整个原始的 getLocalIdent() 并在前面添加了 Replace() 和 toLowerCase() 方法。但这不是一个好的解决方案，我认为：

const getLocalIdent = (loaderContext, localIdentName, localName, options) => {

  if (!options.context) {
    options.context = loaderContext.rootContext;
  }

  const request = path
    .relative(options.context, loaderContext.resourcePath)
    .replace(/\\/g, '/');

  options.content = `${options.hashPrefix + request}+${localName}`;

  localIdentName = localIdentName.replace(/\[local\]/gi, localName);

  const hash = loaderUtils.interpolateName(
    loaderContext,
    localIdentName,
    options
  );

  return hash
    .replace(new RegExp('[^a-zA-Z0-9\\-_\u00A0-\uFFFF]', 'g'), '-')
    .replace(/^((-?[0-9])|--)/, '_$1')
    .replace("-src", "").toLowerCase();
};

我无法从第 3 方包或 cdn 链接加载导入的 css / scss 样式。样式在本地加载得很好，但是当我运行构建时，webpack -p --mode production整个应用程序都会崩溃，并且出现难以区分的错误。它正在尝试加载使用 create-react-app 构建的私有组件项目。

Uncaught SyntaxError: Invalid regular expression: /[A-Za-z\xc3\x82\xc2\xaa\xc3\x82\xc2\xb5\xc3\x82\xc2\xba\xc3\x83\xe2\x82\xac-\xc3\x83\xe2\x80\x93\xc3\x83\xcb\x9c-\xc3\x83\xc2\xb6\xc3\x83\xc2\xb8-\xc3\x8b\xc3\x8b\xe2\x80\xa0-\xc3\x8b\xe2\x80\x98\xc3\x8b\xc2\xa0-\xc3\x8b\xc2\xa4\xc3\x8b\xc2\xac\xc3\x8b\xc2\xae\xc3\x8d\xc2\xb0-\xc3\x8d\xc2\xb4\xc3\x8d\xc2\xb6\xc3\x8d\xc2\xb7\xc3\x8d\xc2\xba-\xc3\x8d\xc2\xbd\xc3\x8e\xe2\x80\xa0\xc3\x8e\xcb\x86-\xc3\x8e\xc5\xa0\xc3\x8e\xc5\x92\xc3\x8e\xc5\xbd-\xc3\x8e\xc2\xa1\xc3\x8e\xc2\xa3-\xc3\x8f\xc2\xb5\xc3\x8f\xc2\xb7-\xc3\x92\xc3\x92\xc5\xa0-\xc3\x94\xc2\xa7\xc3\x94\xc2\xb1-\xc3\x95\xe2\x80\x93\xc3\x95\xe2\x84\xa2\xc3\x95\xc2\xa1-\xc3\x96\xe2\x80\xa1\xc3\x97-\xc3\x97\xc2\xaa\xc3\x97\xc2\xb0-\xc3\x97\xc2\xb2\xc3\x98\xc2\xa0-\xc3\x99\xc5\xa0\xc3\x99\xc2\xae\xc3\x99\xc2\xaf\xc3\x99\xc2\xb1-\xc3\x9b\xe2\x80\x9c\xc3\x9b\xe2\x80\xa2\xc3\x9b\xc2\xa5\xc3\x9b\xc2\xa6\xc3\x9b\xc2\xae\xc3\x9b\xc2\xaf\xc3\x9b\xc2\xba-\xc3\x9b\xc2\xbc\xc3\x9b\xc2\xbf\xc3\x9c\xc3\x9c\xe2\x80\x99-\xc3\x9c\xc2\xaf\xc3\x9d-\xc3\x9e\xc2\xa5\xc3\x9e\xc2\xb1\xc3\x9f\xc5\xa0-\xc3\x9f\xc2\xaa\xc3\x9f\xc2\xb4\xc3\x9f\xc2\xb5\xc3\x9f\xc2\xba\xc3\xa0\xc2\xa0\xe2\x82\xac-\xc3\xa0\xc2\xa0\xe2\x80\xa2\xc3\xa0\xc2\xa0\xc5\xa1\xc3\xa0\xc2\xa0\xc2\xa4\xc3\xa0\xc2\xa0\xc2\xa8\xc3\xa0\xc2\xa1\xe2\x82\xac-\xc3\xa0\xc2\xa1\xcb\x9c\xc3\xa0\xc2\xa2\xc2\xa0\xc3\xa0\xc2\xa2\xc2\xa2-\xc3\xa0\xc2\xa2\xc2\xac\xc3\xa0\xc2\xa4\xe2\x80\x9e-\xc3\xa0\xc2\xa4\xc2\xb9\xc3\xa0\xc2\xa4\xc2\xbd\xc3\xa0\xc2\xa5\xc3\xa0\xc2\xa5\xcb\x9c-\xc3\xa0\xc2\xa5\xc2\xa1\xc3\xa0\xc2\xa5\xc2\xb1-\xc3\xa0\xc2\xa5\xc2\xb7\xc3\xa0\xc2\xa5\xc2\xb9-\xc3\xa0\xc2\xa5\xc2\xbf\xc3\xa0\xc2\xa6\xe2\x80\xa6-\xc3\xa0\xc2\xa6\xc5\x92\xc3\xa0\xc2\xa6\xc3\xa0\xc2\xa6\xc3\xa0\xc2\xa6\xe2\x80\x9c-\xc3\xa0\xc2\xa6\xc2\xa8\xc3\xa0\xc2\xa6\xc2\xaa-\xc3\xa0\xc2\xa6\xc2\xb0\xc3\xa0\xc2\xa6\xc2\xb2\xc3\xa0\xc2\xa6\xc2\xb6-\xc3\xa0\xc2\xa6\xc2\xb9\xc3\xa0\xc2\xa6\xc2\xbd\xc3\xa0\xc2\xa7\xc5\xbd\xc3\xa0\xc2\xa7\xc5\x93\xc3\xa0\xc2\xa7\xc3\xa0\xc2\xa7\xc5\xb8-\xc3\xa0\xc2\xa7\xc2\xa1\xc3\xa0\xc2\xa7\xc2\xb0\xc3\xa0\xc2\xa7\xc2\xb1\xc3\xa0\xc2\xa8\xe2\x80\xa6-\xc3\xa0\xc2\xa8\xc5\xa0\xc3\xa0\xc2\xa8\xc3\xa0\xc2\xa8\xc3\xa0\xc2\xa8\xe2\x80\x9c-\xc3\xa0\xc2\xa8\xc2\xa8\xc3\xa0\xc2\xa8\xc2\xaa-\xc3\xa0\xc2\xa8\xc2\xb0\xc3\xa0\xc2\xa8\xc2\xb2\xc3\xa0\xc2\xa8\xc2\xb3\xc3\xa0\xc2\xa8\xc2\xb5\xc3\xa0\xc2\xa8\xc2\xb6\xc3\xa0\xc2\xa8\xc2\xb8\xc3\xa0\xc2\xa8\xc2\xb9\xc3\xa0\xc2\xa9\xe2\x84\xa2-\xc3\xa0\xc2\xa9\xc5\x93\xc3\xa0\xc2\xa9\xc5\xbe\xc3\xa0\xc2\xa9\xc2\xb2-\xc3\xa0\xc2\xa9\xc2\xb4\xc3\xa0\xc2\xaa\xe2\x80\xa6-\xc3\xa0\xc2\xaa\xc3\xa0\xc2\xaa-\xc3\xa0\xc2\xaa\xe2\x80\x98\xc3\xa0\xc2\xaa\xe2\x80\x9c-\xc3\xa0\xc2\xaa\xc2\xa8\xc3\xa0\xc2\xaa\xc2\xaa-\xc3\xa0\xc2\xaa\xc2\xb0\xc3\xa0\xc2\xaa\xc2\xb2\xc3\xa0\xc2\xaa\xc2\xb3\xc3\xa0\xc2\xaa\xc2\xb5-\xc3\xa0\xc2\xaa\xc2\xb9\xc3\xa0\xc2\xaa\xc2\xbd\xc3\xa0\xc2\xab\xc3\xa0\xc2\xab\xc2\xa0\xc3\xa0\xc2\xab\xc2\xa1\xc3\xa0\xc2\xac\xe2\x80\xa6-\xc3\xa0\xc2\xac\xc5\x92\xc3\xa0\xc2\xac\xc3\xa0\xc2\xac\xc3\xa0\xc2\xac\xe2\x80\x9c-\xc3\xa0\xc2\xac\xc2\xa8\xc3\xa0\xc2\xac\xc2\xaa-\xc3\xa0\xc2\xac\xc2\xb0\xc3\xa0\xc2\xac\xc2\xb2\xc3\xa0\xc2\xac\xc2\xb3\xc3\xa0\xc2\xac\xc2\xb5-\xc3\xa0\xc2\xac\xc2\xb9\xc3\xa0\xc2\xac\xc2\xbd\xc3\xa0\xc2\xad\xc5\x93\xc3\xa0\xc2\xad\xc3\xa0\xc2\xad\xc5\xb8-\xc3\xa0\xc2\xad\xc2\xa1\xc3\xa0\xc2\xad\xc2\xb1\xc3\xa0\xc2\xae\xc6\x92\xc3\xa0\xc2\xae\xe2\x80\xa6-\xc3\xa0\xc2\xae\xc5\xa0\xc3\xa0\xc2\xae\xc5\xbd-\xc3\xa0\xc2\xae\xc3\xa0\xc2\xae\xe2\x80\x99-\xc3\xa0\xc2\xae\xe2\x80\xa2\xc3\xa0\xc2\xae\xe2\x84\xa2\xc3\xa0\xc2\xae\xc5\xa1\xc3\xa0\xc2\xae\xc5\x93\xc3\xa0\xc2\xae\xc5\xbe\xc3\xa0\xc2\xae\xc5\xb8\xc3\xa0\xc2\xae\xc2\xa3\xc3\xa0\xc2\xae\xc2\xa4\xc3\xa0\xc2\xae\xc2\xa8-\xc3\xa0\xc2\xae\xc2\xaa\xc3\xa0\xc2\xae\xc2\xae-\xc3\xa0\xc2\xae\xc2\xb9\xc3\xa0\xc2\xaf\xc3\xa0\xc2\xb0\xe2\x80\xa6-\xc3\xa0\xc2\xb0\xc5\x92\xc3\xa0\xc2\xb0\xc5\xbd-\xc3\xa0\xc2\xb0\xc3\xa0\xc2\xb0\xe2\x80\x99-\xc3\xa0\xc2\xb0\xc2\xa8\xc3\xa0\xc2\xb0\xc2\xaa-\xc3\xa0\xc2\xb0\xc2\xb3\xc3\xa0\xc2\xb0\xc2\xb5-\xc3\xa0\xc2\xb0\xc2\xb9\xc3\xa0\xc2\xb0\xc2\xbd\xc3\xa0\xc2\xb1\xcb\x9c\xc3\xa0\xc2\xb1\xe2\x84\xa2\xc3\xa0\xc2\xb1\xc2\xa0\xc3\xa0\xc2\xb1\xc2\xa1\xc3\xa0\xc2\xb2\xe2\x80\xa6-\xc3\xa0\xc2\xb2\xc5\x92\xc3\xa0\xc2\xb2\xc5\xbd-\xc3\xa0\xc2\xb2\xc3\xa0\xc2\xb2\xe2\x80\x99-\xc3\xa0\xc2\xb2\xc2\xa8\xc3\xa0\xc2\xb2\xc2\xaa-\xc3\xa0\xc2\xb2\xc2\xb3\xc3\xa0\xc2\xb2\xc2\xb5-\xc3\xa0\xc2\xb2\xc2\xb9\xc3\xa0\xc2\xb2\xc2\xbd\xc3\xa0\xc2\xb3\xc5\xbe\xc3\xa0\xc2\xb3\xc2\xa0\xc3\xa0\xc2\xb3\xc2\xa1\xc3\xa0\xc2\xb3\xc2\xb1\xc3\xa0\xc2\xb3\xc2\xb2\xc3\xa0\xc2\xb4\xe2\x80\xa6-\xc3\xa0\xc2\xb4\xc5\x92\xc3\xa0\xc2\xb4\xc5\xbd-\xc3\xa0\xc2\xb4\xc3\xa0\xc2\xb4\xe2\x80\x99-\xc3\xa0\xc2\xb4\xc2\xba\xc3\xa0\xc2\xb4\xc2\xbd\xc3\xa0\xc2\xb5\xc5\xbd\xc3\xa0\xc2\xb5\xc2\xa0\xc3\xa0\xc2\xb5\xc2\xa1\xc3\xa0\xc2\xb5\xc2\xba-\xc3\xa0\xc2\xb5\xc2\xbf\xc3\xa0\xc2\xb6\xe2\x80\xa6-\xc3\xa0\xc2\xb6\xe2\x80\x93\xc3\xa0\xc2\xb6\xc5\xa1-\xc3\xa0\xc2\xb6\xc2\xb1\xc3\xa0\xc2\xb6\xc2\xb3-\xc3\xa0\xc2\xb6\xc2\xbb\xc3\xa0\xc2\xb6\xc2\xbd\xc3\xa0\xc2\xb7\xe2\x82\xac-\xc3\xa0\xc2\xb7\xe2\x80\xa0\xc3\xa0\xc2\xb8-\xc3\xa0\xc2\xb8\xc2\xb0\xc3\xa0\xc2\xb8\xc2\xb2\xc3\xa0\xc2\xb8\xc2\xb3\xc3\xa0\xc2\xb9\xe2\x82\xac-\xc3\xa0\xc2\xb9\xe2\x80\xa0\xc3\xa0\xc2\xba\xc3\xa0\xc2\xba\xe2\x80\x9a\xc3\xa0\xc2\xba\xe2\x80\x9e\xc3\xa0\xc2\xba\xe2\x80\xa1\xc3\xa0\xc2\xba\xcb\x86\xc3\xa0\xc2\xba\xc5\xa0\xc3\xa0\xc2\xba\xc3\xa0\xc2\xba\xe2\x80\x9d-\xc3\xa0\xc2\xba\xe2\x80\x94\xc3\xa0\xc2\xba\xe2\x84\xa2-\xc3\xa0\xc2\xba\xc5\xb8\xc3\xa0\xc2\xba\xc2\xa1-\xc3\xa0\xc2\xba\xc2\xa3\xc3\xa0\xc2\xba\xc2\xa5\xc3\xa0\xc2\xba\xc2\xa7\xc3\xa0\xc2\xba\xc2\xaa\xc3\xa0\xc2\xba\xc2\xab\xc3\xa0\xc2\xba\xc2\xad-\xc3\xa0\xc2\xba\xc2\xb0\xc3\xa0\xc2\xba\xc2\xb2\xc3\xa0\xc2\xba\xc2\xb3\xc3\xa0\xc2\xba\xc2\xbd\xc3\xa0\xc2\xbb\xe2\x82\xac-\xc3\xa0\xc2\xbb\xe2\x80\x9e\xc3\xa0\xc2\xbb\xe2\x80\xa0\xc3\xa0\xc2\xbb\xc5\x93-\xc3\xa0\xc2\xbb\xc5\xb8\xc3\xa0\xc2\xbc\xe2\x82\xac\xc3\xa0\xc2\xbd\xe2\x82\xac-\xc3\xa0\xc2\xbd\xe2\x80\xa1\xc3\xa0\xc2\xbd\xe2\x80\xb0-\xc3\xa0\xc2\xbd\xc2\xac\xc3\xa0\xc2\xbe\xcb\x86-\xc3\xa0\xc2\xbe\xc5\x92\xc3\xa1\xe2\x82\xac\xe2\x82\xac-\xc3\xa1\xe2\x82\xac\xc2\xaa\xc3\xa1\xe2\x82\xac\xc2\xbf\xc3\xa1-\xc3\xa1\xe2\x80\xa2\xc3\xa1\xc5\xa1-\xc3\xa1\xc3\xa1\xc2\xa1\xc3\xa1\xc2\xa5\xc3\xa1\xc2\xa6\xc3\xa1\xc2\xae-\xc3\xa1\xc2\xb0\xc3\xa1\xc2\xb5-\xc3\xa1\xe2\x80\x9a\xc3\xa1\xe2\x80\x9a\xc5\xbd\xc3\xa1\xe2\x80\x9a\xc2\xa0-\xc3\xa1\xc6\x92\xe2\x80\xa6\xc3\xa1\xc6\x92\xe2\x80\xa1\xc3\xa1\xc6\x92\xc3\xa1\xc6\x92-\xc3\xa1\xc6\x92\xc2\xba\xc3\xa1\xc6\x92\xc2\xbc-\xc3\xa1\xe2\x80\xb0\xcb\x86\xc3\xa1\xe2\x80\xb0\xc5\xa0-\xc3\xa1\xe2\x80\xb0\xc3\xa1\xe2\x80\xb0-\xc3\xa1\xe2\x80\xb0\xe2\x80\x93\xc3\xa1\xe2\x80\xb0\xcb\x9c\xc3\xa1\xe2\x80\xb0\xc5\xa1-\xc3\xa1\xe2\x80\xb0\xc3\xa1\xe2\x80\xb0\xc2\xa0-\xc3\xa1\xc5\xa0\xcb\x86\xc3\xa1\xc5\xa0\xc5\xa0-\xc3\xa1\xc5\xa0\xc3\xa1\xc5\xa0-\xc3\xa1\xc5\xa0\xc2\xb0\xc3\xa1\xc5\xa0\xc2\xb2-\xc3\xa1\xc5\xa0\xc2\xb5\xc3\xa1\xc5\xa0\xc2\xb8-\xc3\xa1\xc5\xa0\xc2\xbe\xc3\xa1\xe2\x80\xb9\xe2\x82\xac\xc3\xa1\xe2\x80\xb9\xe2\x80\x9a-\xc3\xa1\xe2\x80\xb9\xe2\x80\xa6\xc3\xa1\xe2\x80\xb9\xcb\x86-\xc3\xa1\xe2\x80\xb9\xe2\x80\x93\xc3\xa1\xe2\x80\xb9\xcb\x9c-\xc3\xa1\xc5\x92\xc3\xa1\xc5\x92\xe2\x80\x99-\xc3\xa1\xc5\x92\xe2\x80\xa2\xc3\xa1\xc5\x92\xcb\x9c-\xc3\xa1\xc5\xa1\xc3\xa1\xc5\xbd\xe2\x82\xac-\xc3\xa1\xc5\xbd\xc3\xa1\xc5\xbd\xc2\xa0-\xc3\xa1\xc2\xb4\xc3\xa1-\xc3\xa1\xe2\x84\xa2\xc2\xac\xc3\xa1\xe2\x84\xa2\xc2\xaf-\xc3\xa1\xe2\x84\xa2\xc2\xbf\xc3\xa1\xc5\xa1-\xc3\xa1\xc5\xa1\xc5\xa1\xc3\xa1\xc5\xa1\xc2\xa0-\xc3\xa1\xe2\x80\xba\xc2\xaa\xc3\xa1\xc5\x93\xe2\x82\xac-\xc3\xa1\xc5\x93\xc5\x92\xc3\xa1\xc5\x93\xc5\xbd-\xc3\xa1\xc5\x93\xe2\x80\x98\xc3\xa1\xc5\x93\xc2\xa0-\xc3\xa1\xc5\x93\xc2\xb1\xc3\xa1\xe2\x82\xac-\xc3\xa1\xe2\x80\x98\xc3\xa1\xc2\xa0-\xc3\xa1\xc2\xac\xc3\xa1\xc2\xae-\xc3\xa1\xc2\xb0\xc3\xa1\xc5\xbe\xe2\x82\xac-\xc3\xa1\xc5\xbe\xc2\xb3\xc3\xa1\xc5\xb8\xe2\x80\x94\xc3\xa1\xc5\xb8\xc5\x93\xc3\xa1\xc2\xa0\xc2\xa0-\xc3\xa1\xc2\xa1\xc2\xb7\xc3\xa1\xc2\xa2\xe2\x82\xac-\xc3\xa1\xc2\xa2\xc2\xa8\xc3\xa1\xc2\xa2\xc2\xaa\xc3\xa1\xc2\xa2\xc2\xb0-\xc3\xa1\xc2\xa3\xc2\xb5\xc3\xa1\xc2\xa4\xe2\x82\xac-\xc3\xa1\xc2\xa4\xc5\x93\xc3\xa1\xc2\xa5-\xc3\xa1\xc2\xa5\xc2\xad\xc3\xa1\xc2\xa5\xc2\xb0-\xc3\xa1\xc2\xa5\xc2\xb4\xc3\xa1\xc2\xa6\xe2\x82\xac-\xc3\xa1\xc2\xa6\xc2\xab\xc3\xa1\xc2\xa7-\xc3\xa1\xc2\xa7\xe2\x80\xa1\xc3\xa1\xc2\xa8\xe2\x82\xac-\xc3\xa1\xc2\xa8\xe2\x80\x93\xc3\xa1\xc2\xa8\xc2\xa0-\xc3\xa1\xc2\xa9\xe2\x80\x9d\xc3\xa1\xc2\xaa\xc2\xa7\xc3\xa1\xc2\xac\xe2\x80\xa6-\xc3\xa1\xc2\xac\xc2\xb3\xc3\xa1\xc2\xad\xe2\x80\xa6-\xc3\xa1\xc2\xad\xe2\x80\xb9\xc3\xa1\xc2\xae\xc6\x92-\xc3\xa1\xc2\xae\xc2\xa0\xc3\xa1\xc2\xae\xc2\xae\xc3\xa1\xc2\xae\xc2\xaf\xc3\xa1\xc2\xae\xc2\xba-\xc3\xa1\xc2\xaf\xc2\xa5\xc3\xa1\xc2\xb0\xe2\x82\xac-\xc3\xa1\xc2\xb0\xc2\xa3\xc3\xa1\xc2\xb1-\xc3\xa1\xc2\xb1\xc3\xa1\xc2\xb1\xc5\xa1-\xc3\xa1\xc2\xb1\xc2\xbd\xc3\xa1\xc2\xb3\xc2\xa9-\xc3\xa1\xc2\xb3\xc2\xac\xc3\xa1\xc2\xb3\xc2\xae-\xc3\xa1\xc2\xb3\xc2\xb1\xc3\xa1\xc2\xb3\xc2\xb5\xc3\xa1\xc2\xb3\xc2\xb6\xc3\xa1\xc2\xb4\xe2\x82\xac-\xc3\xa1\xc2\xb6\xc2\xbf\xc3\xa1\xc2\xb8\xe2\x82\xac-\xc3\xa1\xc2\xbc\xe2\x80\xa2\xc3\xa1\xc2\xbc\xcb\x9c-\xc3\xa1\xc2\xbc\xc3\xa1\xc2\xbc\xc2\xa0-\xc3\xa1\xc2\xbd\xe2\x80\xa6\xc3\xa1\xc2\xbd\xcb\x86-\xc3\xa1\xc2\xbd\xc3\xa1\xc2\xbd-\xc3\xa1\xc2\xbd\xe2\x80\x94\xc3\xa1\xc2\xbd\xe2\x84\xa2\xc3\xa1\xc2\xbd\xe2\x80\xba\xc3\xa1\xc2\xbd\xc3\xa1\xc2\xbd\xc5\xb8-\xc3\xa1\xc2\xbd\xc2\xbd\xc3\xa1\xc2\xbe\xe2\x82\xac-\xc3\xa1\xc2\xbe\xc2\xb4\xc3\xa1\xc2\xbe\xc2\xb6-\xc3\xa1\xc2\xbe\xc2\xbc\xc3\xa1\xc2\xbe\xc2\xbe\xc3\xa1\xc2\xbf\xe2\x80\x9a-\xc3\xa1\xc2\xbf\xe2\x80\x9e\xc3\xa1\xc2\xbf\xe2\x80\xa0-\xc3\xa1\xc2\xbf\xc5\x92\xc3\xa1\xc2\xbf-\xc3\xa1\xc2\xbf\xe2\x80\x9c\xc3\xa1\xc2\xbf\xe2\x80\x93-\xc3\xa1\xc2\xbf\xe2\x80\xba\xc3\xa1\xc2\xbf\xc2\xa0-\xc3\xa1\xc2\xbf\xc2\xac\xc3\xa1\xc2\xbf\xc2\xb2-\xc3\xa1\xc2\xbf\xc2\xb4\xc3\xa1\xc2\xbf\xc2\xb6-\xc3\xa1\xc2\xbf\xc2\xbc\xc3\xa2\xc2\xb1\xc3\xa2\xc2\xbf\xc3\xa2\xe2\x80\x9a-\xc3\xa2\xe2\x80\x9a\xc5\x93\xc3\xa2\xe2\x80\x9e\xe2\x80\x9a\xc3\xa2\xe2\x80\x9e\xe2\x80\xa1\xc3\xa2\xe2\x80\x9e\xc5\xa0-\xc3\xa2\xe2\x80\x9e\xe2\x80\x9c\xc3\xa2\xe2\x80\x9e\xe2\x80\xa2\xc3\xa2\xe2\x80\x9e\xe2\x84\xa2-\xc3\xa2\xe2\x80\x9e\xc3\xa2\xe2\x80\x9e\xc2\xa4\xc3\xa2\xe2\x80\x9e\xc2\xa6\xc3\xa2\xe2\x80\x9e\xc2\xa8\xc3\xa2\xe2\x80\x9e\xc2\xaa-\xc3\xa2\xe2\x80\x9e\xc2\xad\xc3\xa2\xe2\x80\x9e\xc2\xaf-\xc3\xa2\xe2\x80\x9e\xc2\xb9\xc3\xa2\xe2\x80\x9e\xc2\xbc-\xc3\xa2\xe2\x80\x9e\xc2\xbf\xc3\xa2\xe2\x80\xa6\xe2\x80\xa6-\xc3\xa2\xe2\x80\xa6\xe2\x80\xb0\xc3\xa2\xe2\x80\xa6\xc5\xbd\xc3\xa2\xe2\x80\xa0\xc6\x92\xc3\xa2\xe2\x80\xa0\xe2\x80\x9e\xc3\xa2\xc2\xb0\xe2\x82\xac-\xc3\xa2\xc2\xb0\xc2\xae\xc3\xa2\xc2\xb0\xc2\xb0-\xc3\xa2\xc2\xb1\xc5\xbe\xc3\xa2\xc2\xb1\xc2\xa0-\xc3\xa2\xc2\xb3\xc2\xa4\xc3\xa2\xc2\xb3\xc2\xab-\xc3\xa2\xc2\xb3\xc2\xae\xc3\xa2\xc2\xb3\xc2\xb2\xc3\xa2\xc2\xb3\xc2\xb3\xc3\xa2\xc2\xb4\xe2\x82\xac-\xc3\xa2\xc2\xb4\xc2\xa5\xc3\xa2\xc2\xb4\xc2\xa7\xc3\xa2\xc2\xb4\xc2\xad\xc3\xa2\xc2\xb4\xc2\xb0-\xc3\xa2\xc2\xb5\xc2\xa7\xc3\xa2\xc2\xb5\xc2\xaf\xc3\xa2\xc2\xb6\xe2\x82\xac-\xc3\xa2\xc2\xb6\xe2\x80\x93\xc3\xa2\xc2\xb6\xc2\xa0-\xc3\xa2\xc2\xb6\xc2\xa6\xc3\xa2\xc2\xb6\xc2\xa8-\xc3\xa2\xc2\xb6\xc2\xae\xc3\xa2\xc2\xb6\xc2\xb0-\xc3\xa2\xc2\xb6\xc2\xb6\xc3\xa2\xc2\xb6\xc2\xb8-\xc3\xa2\xc2\xb6\xc2\xbe\xc3\xa2\xc2\xb7\xe2\x82\xac-\xc3\xa2\xc2\xb7\xe2\x80\xa0\xc3\xa2\xc2\xb7\xcb\x86-\xc3\xa2\xc2\xb7\xc5\xbd\xc3\xa2\xc2\xb7-\xc3\xa2\xc2\xb7\xe2\x80\x93\xc3\xa2\xc2\xb7\xcb\x9c-\xc3\xa2\xc2\xb7\xc5\xbe\xc3\xa2\xc2\xb8\xc2\xaf\xc3\xa3\xe2\x82\xac\xe2\x80\xa6\xc3\xa3\xe2\x82\xac\xe2\x80\xa0\xc3\xa3\xe2\x82\xac\xc2\xb1-\xc3\xa3\xe2\x82\xac\xc2\xb5\xc3\xa3\xe2\x82\xac\xc2\xbb\xc3\xa3\xe2\x82\xac\xc2\xbc\xc3\xa3-\xc3\xa3\xe2\x80\x9a\xe2\x80\x93\xc3\xa3\xe2\x80\x9a-\xc3\xa3\xe2\x80\x9a\xc5\xb8\xc3\xa3\xe2\x80\x9a\xc2\xa1-\xc3\xa3\xc6\x92\xc2\xba\xc3\xa3\xc6\x92\xc2\xbc-\xc3\xa3\xc6\x92\xc2\xbf\xc3\xa3\xe2\x80\x9e\xe2\x80\xa6-\xc3\xa3\xe2\x80\x9e\xc2\xad\xc3\xa3\xe2\x80\x9e\xc2\xb1-\xc3\xa3\xe2\x80\xa0\xc5\xbd\xc3\xa3\xe2\x80\xa0\xc2\xa0-\xc3\xa3\xe2\x80\xa0\xc2\xba\xc3\xa3\xe2\x80\xa1\xc2\xb0-\xc3\xa3\xe2\x80\xa1\xc2\xbf\xc3\xa3\xe2\x82\xac-\xc3\xa4\xc2\xb6\xc2\xb5\xc3\xa4\xc2\xb8\xe2\x82\xac-\xc3\xa9\xc2\xbf\xc5\x92\xc3\xaa\xe2\x82\xac\xe2\x82\xac-\xc3\xaa\xe2\x80\x99\xc5\x92\xc3\xaa\xe2\x80\x9c-\xc3\xaa\xe2\x80\x9c\xc2\xbd\xc3\xaa\xe2\x80\x9d\xe2\x82\xac-\xc3\xaa\xcb\x9c\xc5\x92\xc3\xaa\xcb\x9c-\xc3\xaa\xcb\x9c\xc5\xb8\xc3\xaa\xcb\x9c\xc2\xaa\xc3\xaa\xcb\x9c\xc2\xab\xc3\xaa\xe2\x84\xa2\xe2\x82\xac-\xc3\xaa\xe2\x84\xa2\xc2\xae\xc3\xaa\xe2\x84\xa2\xc2\xbf-\xc3\xaa\xc5\xa1\xe2\x80\x94\xc3\xaa\xc5\xa1\xc2\xa0-\xc3\xaa\xe2\x80\xba\xc2\xa5\xc3\xaa\xc5\x93\xe2\x80\x94-\xc3\xaa\xc5\x93\xc5\xb8\xc3\xaa\xc5\x93\xc2\xa2-\xc3\xaa\xc5\xbe\xcb\x86\xc3\xaa\xc5\xbe\xe2\x80\xb9-\xc3\xaa\xc5\xbe\xc5\xbd\xc3\xaa\xc5\xbe-\xc3\xaa\xc5\xbe\xe2\x80\x9c\xc3\xaa\xc5\xbe\xc2\xa0-\xc3\xaa\xc5\xbe\xc2\xaa\xc3\xaa\xc5\xb8\xc2\xb8-\xc3\xaa\xc2\xa0\xc3\xaa\xc2\xa0\xc6\x92-\xc3\xaa\xc2\xa0\xe2\x80\xa6\xc3\xaa\xc2\xa0\xe2\x80\xa1-\xc3\xaa\xc2\xa0\xc5\xa0\xc3\xaa\xc2\xa0\xc5\x92-\xc3\xaa\xc2\xa0\xc2\xa2\xc3\xaa\xc2\xa1\xe2\x82\xac-\xc3\xaa\xc2\xa1\xc2\xb3\xc3\xaa\xc2\xa2\xe2\x80\x9a-\xc3\xaa\xc2\xa2\xc2\xb3\xc3\xaa\xc2\xa3\xc2\xb2-\xc3\xaa\xc2\xa3\xc2\xb7\xc3\xaa\xc2\xa3\xc2\xbb\xc3\xaa\xc2\xa4\xc5\xa0-\xc3\xaa\xc2\xa4\xc2\xa5\xc3\xaa\xc2\xa4\xc2\xb0-\xc3\xaa\xc2\xa5\xe2\x80\xa0\xc3\xaa\xc2\xa5\xc2\xa0-\xc3\xaa\xc2\xa5\xc2\xbc\xc3\xaa\xc2\xa6\xe2\x80\x9e-\xc3\xaa\xc2\xa6\xc2\xb2\xc3\xaa\xc2\xa7\xc3\xaa\xc2\xa8\xe2\x82\xac-\xc3\xaa\xc2\xa8\xc2\xa8\xc3\xaa\xc2\xa9\xe2\x82\xac-\xc3\xaa\xc2\xa9\xe2\x80\x9a\xc3\xaa\xc2\xa9\xe2\x80\x9e-\xc3\xaa\xc2\xa9\xe2\x80\xb9\xc3\xaa\xc2\xa9\xc2\xa0-\xc3\xaa\xc2\xa9\xc2\xb6\xc3\xaa\xc2\xa9\xc2\xba\xc3\xaa\xc2\xaa\xe2\x82\xac-\xc3\xaa\xc2\xaa\xc2\xaf\xc3\xaa\xc2\xaa\xc2\xb1\xc3\xaa\xc2\xaa\xc2\xb5\xc3\xaa\xc2\xaa\xc2\xb6\xc3\xaa\xc2\xaa\xc2\xb9-\xc3\xaa\xc2\xaa\xc2\xbd\xc3\xaa\xc2\xab\xe2\x82\xac\xc3\xaa\xc2\xab\xe2\x80\x9a\xc3\xaa\xc2\xab\xe2\x80\xba-\xc3\xaa\xc2\xab\xc3\xaa\xc2\xab\xc2\xa0-\xc3\xaa\xc2\xab\xc2\xaa\xc3\xaa\xc2\xab\xc2\xb2-\xc3\xaa\xc2\xab\xc2\xb4\xc3\xaa\xc2\xac-\xc3\xaa\xc2\xac\xe2\x80\xa0\xc3\xaa\xc2\xac\xe2\x80\xb0-\xc3\xaa\xc2\xac\xc5\xbd\xc3\xaa\xc2\xac\xe2\x80\x98-\xc3\xaa\xc2\xac\xe2\x80\x93\xc3\xaa\xc2\xac\xc2\xa0-\xc3\xaa\xc2\xac\xc2\xa6\xc3\xaa\xc2\xac\xc2\xa8-\xc3\xaa\xc2\xac\xc2\xae\xc3\xaa\xc2\xaf\xe2\x82\xac-\xc3\xaa\xc2\xaf\xc2\xa2\xc3\xaa\xc2\xb0\xe2\x82\xac-\xc3\xad\xc5\xbe\xc2\xa3\xc3\xad\xc5\xbe\xc2\xb0-\xc3\xad\xc5\xb8\xe2\x80\xa0\xc3\xad\xc5\xb8\xe2\x80\xb9-\xc3\xad\xc5\xb8\xc2\xbb\xc3\xaf\xc2\xa4\xe2\x82\xac-\xc3\xaf\xc2\xa9\xc2\xad\xc3\xaf\xc2\xa9\xc2\xb0-\xc3\xaf\xc2\xab\xe2\x84\xa2\xc3\xaf\xc2\xac\xe2\x82\xac-\xc3\xaf\xc2\xac\xe2\x80\xa0\xc3\xaf\xc2\xac\xe2\x80\x9c-\xc3\xaf\xc2\xac\xe2\x80\x94\xc3\xaf\xc2\xac\xc3\xaf\xc2\xac\xc5\xb8-\xc3\xaf\xc2\xac\xc2\xa8\xc3\xaf\xc2\xac\xc2\xaa-\xc3\xaf\xc2\xac\xc2\xb6\xc3\xaf\xc2\xac\xc2\xb8-\xc3\xaf\xc2\xac\xc2\xbc\xc3\xaf\xc2\xac\xc2\xbe\xc3\xaf\xc2\xad\xe2\x82\xac\xc3\xaf\xc2\xad\xc3\xaf\xc2\xad\xc6\x92\xc3\xaf\xc2\xad\xe2\x80\x9e\xc3\xaf\xc2\xad\xe2\x80\xa0-\xc3\xaf\xc2\xae\xc2\xb1\xc3\xaf\xc2\xaf\xe2\x80\x9c-\xc3\xaf\xc2\xb4\xc2\xbd\xc3\xaf\xc2\xb5-\xc3\xaf\xc2\xb6\xc3\xaf\xc2\xb6\xe2\x80\x99-\xc3\xaf\xc2\xb7\xe2\x80\xa1\xc3\xaf\xc2\xb7\xc2\xb0-\xc3\xaf\xc2\xb7\xc2\xbb\xc3\xaf\xc2\xb9\xc2\xb0-\xc3\xaf\xc2\xb9\xc2\xb4\xc3\xaf\xc2\xb9\xc2\xb6-\xc3\xaf\xc2\xbb\xc2\xbc\xc3\xaf\xc2\xbc\xc2\xa1-\xc3\xaf\xc2\xbc\xc2\xba\xc3\xaf\xc2\xbd-\xc3\xaf\xc2\xbd\xc5\xa1\xc3\xaf\xc2\xbd\xc2\xa6-\xc3\xaf\xc2\xbe\xc2\xbe\xc3\xaf\xc2\xbf\xe2\x80\x9a-\xc3\xaf\xc2\xbf\xe2\x80\xa1\xc3\xaf\xc2\xbf\xc5\xa0-\xc3\xaf\xc2\xbf\xc3\xaf\xc2\xbf\xe2\x80\x99-\xc3\xaf\xc2\xbf\xe2\x80\x94\xc3\xaf\xc2\xbf\xc5\xa1-\xc3\xaf\xc2\xbf\xc5\x93]/: Range out of order in character class\n    at new RegExp (<anonymous>)\n    at Object.<anonymous> (parsePhoneNumber.js:23)\n    at r (bootstrap:63)\n    at Object.<anonymous> (Leniency.js:246)\n    at r (bootstrap:63)\n    at Object.<anonymous> (findNumbers.js:5)\n    at r (bootstrap:63)\n    at Module.<anonymous> (index.js:1)\n    at r (bootstrap:63)\n    at Object.<anonymous> (main.scss:3)\n

这是我的 webpack 配置：

const CopyWebpackPlugin = require("copy-webpack-plugin");\nconst AssetsPlugin = require("assets-webpack-plugin");\nconst webpack = require("webpack");\n\nmodule.exports = {\n    output: {\n …

据我所知，CSS 加载器输出 CommonJS，它不能与 Webpack 的某些优化功能一起使用。有没有办法让CSS加载器输出ES模块（import/ export）？

编辑：

ES 模块会发生以下情况：

main.js

import { FOO } from './module';
console.log(FOO);

输出

var FOO = 'foo';
console.log(FOO);

并使用 CSS 加载器：

main.js

import { foo } from './styles.scss';
console.log(foo);

输出

38: (function(module, exports, __webpack_require__) {
    module.exports = {"foo":"a"};
}),
...
var styles = __webpack_require__(38);
console.log(test["foo"]);

我正在使用网络包。我需要将 css 文件作为字符串加载，我可以使用 css-loader 来完成此操作，但我还需要使用 MiniCssExtractPlugin 将 css 直接注入到 DOM 中。但是，如果我使用 MiniCssExtractPlugin，当我尝试导入 css 时，我会收到一个空对象。

import bootstrapStyle from 'bootstrap/dist/css/bootstrap.css';

console.log(bootStrapStyle); // empty object

网页包配置

module: {
            rules: [{
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                }, {
                    loader: 'css-loader',
                }],
            },

有没有办法同时实现两者呢？

我需要将 css 作为字符串，以便将其注入到 Web 组件中。