标签: css-loader

我正在使用Webpack 2和webpack-dev-server以及Sass加载器,实际配置:

{
    test: /\.scss/,
    loaders: [
        "style",
        { loader: "css", query: { modules: false, sourceMap: true } },
        { loader: "resolve-url" },
        { loader: "sass", query: { sourceMap: true } }
    ]
}

这非常有效,并且引用的图像background: url()由webpack处理,并且也可以替换为类似的样式background-somehash.jpg,可以通过键入来访问此文件http://localhost:8080/background-somehash.jpg.当我使用开发人员工具在样式背景定义中提供整个URL(包括localhost)时,它也有效...

唯一不起作用的是webpack生成的原始css,看起来像background: url(background-somehash.jpg).我也尝试过各种URL像./,../,../../或./images/尝试,如果根被设置在某种程度上有所不同.我没有得到的是该文件在根目录下可用...

编辑: 当与extract-text-webpack-plugin提取样式一起使用到单独的真实styles.css文件中时,它工作得很好.问题是为什么当从javascript包提供最终的css时它不起作用？

澄清: 一切都正确引用,图像是可用的,它所有的作品,当我使用CSS提取到单独的文件,extract-text-webpack-plugin它只是当完全一样的CSS是每天从不起作用bundle.js这是在当时引用的index.html像<link href="blob:..." rel="stylesheet">

我正在尝试使用webpack在我的项目中导入一些字体(如Roboto),但它们都不起作用.

我的文件结构如下所示:

+-src---fonts-+-Roboto---Roboto.ttf
|             |
|             +-fonts.css
|
+-webpack.config.js

我的fonts.css档案:

@font-face {
    font-family: 'Roboto';
    src: url(/Roboto/Roboto.ttf) format('truetype');
}

我webpack.config.js看起来像这样:

//...
loaders: [
  {
    test: /\.css/,
    loaders: [
      'style-loader',
      `css-loader?${JSON.stringify({
        sourceMap: isDebug,
        localIdentName: isDebug ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]',
        modules: true,
        minimize: !isDebug,
        importLoaders: 1
      })}`,
      'postcss-loader',
    ],
  },
  {
    test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
    loader: 'url-loader',
  },
  {
    test: /\.(wav|mp3|eot|ttf)$/,
    loader: 'file-loader',
  },
],
//...

当我运行webpack时,没有出现错误.但是Roboto没有加载字体(文本仍然是默认的字体系列,尽管我已经设置font-family: 'Roboto'为文本元素).

我尝试过的:

1. 将.css文件中的路径更改url()为相对路径:出现错误:

   ERROR …

在使用import语句时,我很难区分sass-loader和css-loader.根据我的知识,css loader解析导入语句(@import),而style-loader适用于在页面上动态注入样式.我也在我的应用程序中使用sass-loader.所以我对sass-loader功能感到困惑.它是否也解析了import语句以及将sass转换为css.在这种情况下,如果我在项目中只使用sass文件,那么我不需要css-loader,因为该工作将由sass-loader完成.我在这儿吗？有谁可以请高亮一点.任何帮助将非常感激

我只是在尝试使用命令创建一个react应用，npx create-react-app my-app 但出现此错误：

css-loader@1.0.0: The engine "node" is incompatible with this module. Expected version ">= 6.9.0 <7.0.0 || >= 8.9.0". Got "8.5.0"

我试过更新节点，但是似乎不起作用，检查它说的是8.5.0版本，就像在错误中一样。甚至重启我的计算机作为最后的选择，但这也无济于事。

还有什么我可以尝试的吗？欢迎任何建议。

现在我正在将我当前的项目移动Webpack 1到,Webpack 2并且我遇到了一些以前工作正常的css模块的问题.特别是,我使用css-loader和react-css-modules.我目前的开发配置如下:

test: /module\.css$/,
use: [
        'style-loader',
        {
           loader: 'css-loader',
           options: {
              modules: true,
              importLoaders: 1,
              localIdentName: '[name]__[local]___[hash:base64:5]'
           }
        },
        'postcss-loader'
   ]

它工作正常.对于生产我使用ExtractTextPlugin(版本2.0.0-beta.4)和我的Webpack配置为这种情况是这样的:

test: /module\.css$/,
loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: [
                    {
                       loader: 'css-loader',
                       options: {
                           modules: true,
                           importLoaders: 1,
                           localIdentName: '[hash:base64:5]'
                       }
                     },
                     'postcss-loader'
                    ]
                }),

在这种情况下,构建失败并出现以下错误:

 Module build failed: Error: composition is only allowed
 when selector is single :local class name

所以看起来它没有预先添加本地前缀.它也在css-loader文档中提到:

注意:对于使用extract-text-webpack-plugin进行预渲染,您应该在预渲染包中使用css-loader/locals而不是style-loader!css-loader.它不嵌入CSS,只导出标识符映射.

所以我尝试了加载器:'css-loader/locals'以及将它添加到选项中,但不幸的是,没有任何作用.

我也试图用postcss …

我对webpack / npm还是很陌生，我正设法让我了解如何在其他项目相关性中使用CSS url。

资料夹结构

src
  fonts/
  scss/
    app.scss
  js/
    app.js
  img/
  index.html

webpack.config.js

var path = require('path');
var extractPlugin = require('extract-text-webpack-plugin');
var cleanWebpackPlugin = require('clean-webpack-plugin');
var htmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require("webpack");

module.exports = {
    entry: './src/js/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/app.js'
    },
    devServer: {
        stats: 'errors-only',
        compress: true,
        open: true,
        port: 9000
    },
    module: {

        rules: [

            // ES6 -> ES5 transpiler

            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015'] …

我刚刚升级到webpack 4.我使用css模块.

错误:

./client/src/common/accordian-component/accordian.css中的错误(./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??ref--5- 2!./ client/src/common/accordian-component/accordian.css)模块构建失败:TypeError:无法在Object处读取未定义的属性"context".(/Users/phillipjones/Workspace/sl_pathfinder/website/node_modules/css-loader/lib/loader.js:101:57)位于Object的Array.map()处.(/Users/phillipjones/Workspace/sl_pathfinder/website/node_modules/css-loader/lib/loader.js:99:31)位于/ Users/phillipjones/Workspace/sl_pathfinder/website/node_modules/css-loader/lib/processCss. js:200:3来自上一次活动:在Object.loader(/ Users/phillipjones)的Promise.then(/Users/phillipjones/Workspace/sl_pathfinder/website/node_modules/cls-bluebird/lib/shimMethod.js:38:20) /Workspace/sl_pathfinder/website/node_modules/postcss-loader/lib/index.js:96:6)@ ./client/src/common/accordian-component/accordian.css 2:14-160 21:1-42: 3 21:158-42:2 22:19-165 @ ./client/src/common/accordian-component/accordian-item.jsx @ ./client/src/common/accordian-component/all-components.js @ ./client/src/common/accordian-component/accordian-component.jsx @ ./client/src/common/index.js @ ./client/src/views/main-view/all-components.js @ ./ client/src/views/main-view/main-view.jsx @ ./client/src/views/index.js @ ./client/src/routes/index.jsx @ ./client/src/App.jsx @ multi ./client/src/App.jsx

webpack.config.js

require('dotenv').config();
const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const importPlugin = require('postcss-import');
const postcssFunctions = require('postcss-functions')({
  functions: require('./postcss-functions') }); // eslint-disable-line
// const fs = require('fs');
// const ExtractTextPlugin = require('extract-text-webpack-plugin');

const nodeEnv = process.env.NODE_ENV || …

首先，让我说我知道我有一个自定义组件“卡片”，我在其中一个路线“主页”中使用了它。

卡.js

import s from 'Card.css';
class Card {
    ...
    render(){
        return (<div className={cx(className, s.card)}>
            {this.props.children}
        </div>);
    }
}

卡片文件

.card {
    display: block;
}

主页.js

<Card className={s.testCard}>
...
</Card>

主页.css

.testCard { display: none; }

我在这里遇到的一个问题是，即使我将显示设置为无，卡片仍然可见，因为浏览器中的 CSS 顺序似乎是随机的。即使禁用了 Javascript，此顺序也不会改变。

为了让 .testCard 在 .card 之后正确加载，我使用了“composes:”：

主页.css

.testCard {
    composes: card from 'components/Card.css';
    display: none;
}

显然这会导致 css-loader 识别 .testCard 应该在 .card 之后加载。除了，如果我禁用 Javascript，页面将恢复到旧行为：.card 在 .testCard 之后加载，它再次变得可见。

让我们的页面优先考虑 .testCard 而不是在启用或不启用 Javascript 的情况下行为一致的卡片的推荐方法是什么？

有一个小项目。一个 html + css + js。我想给它添加包裹。安装它（除了包裹，我没有更多的包裹）。在 package.json 我做了：

 "scripts": {
    "start": "parcel index.html"
  },

当我运行 npm start 时给出错误：

C:\Users\ricar\OneDrive\Documentos\Web Developer\Projects\Blog Posts\DOM\node_modules\parcel-bundler\src\builtins\css-loader.js: Invalid Version: undefined

有任何我不知道的更新，我确实需要什么？谢谢

如何在 Nextjs 中编辑Webpack 配置中的localIdentName字段，css-loader以便我可以散列/隐藏/混淆 css 类名？

下面的例子来自纽约时报。注意类名：