问题标签 [css-loader]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
57 浏览

webpack - 在 webpack.config.js 中添加包含时 css-loader 失败

我有一个webpack.config.js文件作为打击:

但是,它失败了。错误信息是:

但是删除包含时成功。我的文件目录是:

在此处输入图像描述

0 投票
1 回答
160 浏览

angular - Angular2 webpack 和 css 加载器

我对 Angular 2 和 webpack 有疑问。问题是,如果我在我的 css 文件中使用相对路径,例如“background: url("./../images/squares.gif") center left no-repeat;” 构建应用程序时出现错误:

“15% 19/206 build modulesModuleBuildError: Module build failed: SyntaxError: Unexpected token ILLEGAL”

我的 webpack 配置是:

有谁能够帮我?

提前致谢!

0 投票
1 回答
3084 浏览

reactjs - 实现 sass-loader webpack 时出错

我目前正在尝试让 sass 与我的 webpack 应用程序一起工作。我已经成功配置style-loader& css-loader。但是,当我尝试实施时,sass-loader我收到以下错误:

让我带您完成我如何安装style-loader&的步骤css-loader

  1. npm install style-loader css-loader --save-dev
  2. 在 webpack.config 中添加了加载器:

    /li>
  3. 创建css文件夹并放置在那里myStyle.css

  4. 将样式表导入反应组件require(../../css/myStyle.css

这行得通,我没有任何问题。在此之后,我尝试添加sass-loader. 我采取的步骤与第一步非常相似。

  1. npm install sass-loader node-sass --save-dev
  2. 将加载器添加到 webpack.config

    /li>
  3. 更改myStyle.cssmyStyle.scss

  4. 将样式表导入反应组件require('../../myStyle.scss')

在此之后,我收到上面粘贴在 DOM 中的错误。这是控制台向我发出的错误:

任何建议或帮助将不胜感激。现在我要睡觉了,明天早上再回来检查。祝大家编码愉快,祝大家晚安!

0 投票
1 回答
1392 浏览

reactjs - 如何使用 webpack 和 css-loader 仅加载特定的 css 类?

我正在使用 webpack,我已经安装style-loadercss-loader

样式.css

entry.js

使用require('!style!css!./styles.css')结果<style>进入页面如下

在此处输入图像描述

使用var css = require('!css!./styles.css')thenconsole.log(css)结果如下

在此处输入图像描述

问题

是否可以仅加载特定的 css 类,例如var fooClass = css.foo,我打算将它与我的 React 组件一起使用,例如,<input style={ foo }/>或者也许<input className={ foo }/>

0 投票
1 回答
57 浏览

css - Bootstrap css问题 - 覆盖到新的类名

我正在使用 React Starter 从以下 Git Repo 构建我的新应用程序: https ://github.com/alicoding/react-webpack-babel

出于某种原因,每次我在“index.scss”中有一个新类时,它都会生成奇怪的新类名。

例如,如果我将新类写为:

它变成了这样的东西:

任何人都知道它为什么这样做?使用这种方法的正确方法是什么?或者如果我不想使用这种方法怎么办?

请注意。

谢谢,

0 投票
1 回答
744 浏览

javascript - webpack css-loader 在 karma 中无法正常工作

我正在使用css-loader Local Scope功能,并且遇到了一些麻烦。我正在为Vue.js. 该指令正在导入scss文件并使用加载器创建的导出类将其分配给指令正在创建的某些元素。这在我为 构建时有效prod/dev,但当我为test它构建时不起作用。我导入我的指令文件,并通过使用 创建一个 dom 元素来测试其中一个指令函数jQuery,然后将其分配给css-loader导出的类。我karma用于测试,所以当我karma在浏览器中启动服务器以调试测试时,我看到元素被分配了类,但它们没有任何样式。我怀疑我的webpack配置test环境有问题。这是我的环境webpack配置test

然后我将它与业力配置文件一起使用:

这是我的指令,导入 scss 文件:

然后我在测试中使用它来为测试创建的 dom 元素分配类:

所以分配了类,但我没有看到在我的样式的ExtractTextPluginstyle.css指定的任何类似内容,并且实际上没有样式应用于我的测试创建的 dom 元素。有人知道我做错了什么吗?webpack

0 投票
1 回答
38 浏览

javascript - 无法实现 Webpack css-loader,编译时出错

我是 webpack 的新手,我正在尝试通过分叉另一个体面的构建来创建自己的构建。

没有编译的一件事是 css,所以我做了以下事情:

  1. 确保 webpack 配置文件中当前没有 css 加载器(没有)
  2. npm install css-loader --save-dev
  3. 添加装载机
  4. 添加import css from './static/css/style.css';到我的条目 .js 文件
  5. 对我的 css 进行一些任意更改以进行测试

只是为了清楚起见,我的装载机看起来像这样:

然后我跑npm run build了,我的终端就是在这里出现以下错误:

我不确定我在这里哪里出错了,任何帮助或指示将不胜感激。

0 投票
1 回答
493 浏览

intellij-idea - WebStorm 自动保存 sass 文件并 webpack-dev-server 自动加载它们?

我什至不确定,因为它不会发生在 js 文件中。

因此,当我在 scss 文件中编写时,在似乎 300 毫秒的去抖动之后,没有保存文件,webpack-dev-server 热重新加载 sass 包。

我不知道要提供什么其他信息。问我什么?:}

0 投票
1 回答
4257 浏览

css - 如何调试 Webpack 捆绑的 CSS?

我已经从老式的方式包含样式表:

到 Webpack 方法:

它可以工作,但我不喜欢它从这个文件中提取 css 到内联标记中,因为这样在开发工具中调试它就更难了。例如,我不知道这些属性来自哪个文件和行:
在此处输入图像描述

如何将其移动到单独的文件或生成指向源文件的源映射?所以当我检查它的开发工具时,它看起来像这样:

在此处输入图像描述

我的webpack.config.js

我的app.js

0 投票
1 回答
134 浏览

javascript - 如何使用 jQuery 选择由 css-loader 转换的类名?

我正在使用带有 css-loader 的 webpack。除了我不知道如何使用 jQuery 来选择 css-loader 转换的类之外,一切都运行良好。转换后的类名类似于“src-styleauthTextboxLeft1Npf4”,具有以下 css-loader 配置:

这是反应代码

无论如何,使第二个选择有效吗?