标签: css-loader

在依赖升级地狱.想知道我是否能得到任何人的小费.

除了一件事,能够把所有东西都搞砸了.我正在项目中使用带有PostCSS的CSS模块.我正在升级到Webpack 2并借此机会升级所有其他软件包.

我遇到的问题是其中一个CSS处理器.基本上任何包含从另一个文件加载类的composes属性的CSS文件都会失败.

这就是Webpack CSS加载器的样子:

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

当我尝试加载使用样式表与其中一个组合的页面时,我在浏览器错误控制台中看到此错误:

Dynamic page loading failed TypeError: Cannot read property 'removeChild' of null
    at removeStyleElement (eval at ./node_modules/style-loader/addStyles.js (main.js:9858), <anonymous>:122:25)
    at remove (eval at ./node_modules/style-loader/addStyles.js (main.js:9858), <anonymous>:168:4)
    at Array.updateStyle (eval at ./node_modules/style-loader/addStyles.js (main.js:9858), <anonymous>:180:4)
    at addStylesToDom (eval at ./node_modules/style-loader/addStyles.js (main.js:9858), <anonymous>:69:22)
    at module.exports (eval at ./node_modules/style-loader/addStyles.js (main.js:9858), <anonymous>:37:2)
    at eval (eval at ./app/components/EntryGroup/styles.css …

要将图像添加到项目中，我正在使用 sass 文件中的 content: url() css 属性并指定 src 文件夹的相对路径，例如content: url('/images/right-arrow.svg');.

问题是，在生产版本中，我需要去掉第一个斜杠才能('images/right-arrow.svg')在捆绑的 css 文件中包含这样的路径。

我可以获得所需行为的唯一方法是使用url: false选项 for css-loader，并在 sass file: 中写入不带斜杠的路径content: url('/images/right-arrow.svg')，但这样的选项不会从 node_modules 添加必要的文件，例如字体和图像。

网络包配置：

return {
entry: ['babel-polyfill', './src/app.js'],
output: {
  path: path.join(__dirname, 'public/'),
  filename: '[name].[hash].js',
},
mode: isProduction || 'development',
module: {
  rules: [
    {
      loader: 'babel-loader',
      test: /\.js$/,
      exclude: /node_modules/
    },

    {
      test: /\.s?css$/,
      use: [
        isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
        {
          loader: 'css-loader',
          options: {
            url: true …

我想用 webpack 4 打包一个 javascript 项目，但我正在努力处理 CSS 文件。我捆绑的 JS 文件将被其他网站使用带有绝对 URI 的脚本标签。所以我希望我的包为样式表注入链接标签，以便管理文件名中的哈希。

我的样式源是一个scss文件。当我使用它时效果很好，style-loader但我想在其他文件中提取 CSS。

我尝试了以下方法webpack.config.js：

const miniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    miniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader']
            }
        ]
    },
    plugins: [
        new miniCssExtractPlugin({
            filename: '[name].[hash].css',
        }),
    ]
};

它在输出目录中创建我的 CSS 文件，但加载程序不会像那样将它注入到 DOMstyle-loader中。而且我不能style-loader在mini-css-extract-plugin.

我无法使用，html-webpack-plugin因为没有 HTML 输出文件。有没有办法用现有的装载机做我想做的事？有没有办法在JS中获取提取的文件url来自己创建链接标签？

我的 devDependencies ：

{
  // ...
  "devDependencies": {
    "css-loader": "^3.3.2",
    "mini-css-extract-plugin": …

我正在使用react,我找到了这个很棒的库,可以帮助你为名为classNames的组件定义css类.我也使用webpack css-loader将css导入到我的组件中,当尝试使用带导入css的classNames时,我收到语法错误.

这是我的例子:

import React from 'react';
import styles from './style.css';
import classNames from 'classnames';

export default class Menu extends React.Component {
    render() {
        let style = classNames({
            styles.someClass: true
        });
    }
}

我怎么能同时使用？

给出以下 webpack 4 配置：

const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const devMode = process.env.NODE_ENV !== 'production'
const devFlagPlugin = new webpack.DefinePlugin({
  __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
})

module.exports = {
    mode: "development",
    entry: [
        'webpack-dev-server/client?http://0.0.0.0:3000',
        'webpack/hot/only-dev-server',
        "./app/app.js"
    ],
    output: {
        path: path.join(__dirname, "build"),
        filename: "bundle.js"
    },
    devtool: 'eval-source-map',
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            { 
                test: /\.jsx|\.js?$/, 
                loader: 'babel-loader',
                options: {
                    plugins: [
                        'react-hot-loader/babel'
                    ]
                },
                exclude: /node_modules/},
            {
                test: /\.jsx|\.js$/, …

我正在使用css-loader并出现以下错误：

./src/pages/home/index.js中的错误找不到
模块：错误：无法解析'/ Users / jian / Documents / sina / webpack-barbarian-test'
@ ./src/中的'css-loader' pages / home / index.js 2：0-20
@ multi ../webpack-barbarian/node_modules/webpack-dev-server/client？http：// localhost ../webpack-barbarian/node_modules/webpack/hot/dev-server.js ./src/pages/home/index.js

./src/pages/home/index.js：

import $ from 'jQuery'
import './style.css'

$("#container").html('This is a test file, 1')

webpack.config.js：

{
    mode: 'development',
    entry: {
        home: './src/pages/home/index.js'
    },
    output: {
        path: '/Users/jian/Documents/sina/webpack-barbarian-test/dist',
        filename: '[name].js',
        publicPath: '/'
    },
    resolve: {
        extensions: ['.js', 'jsx', '.vue', '.json'],
        alias: {}
    },
    module: {
        rules: [{
            test: /\.js$/,
            loader: 'babel-loader',
            include: ['/Users/jian/Documents/sina/src', '/Users/jian/Documents/sina/test'],
            options: …

我以推荐的方式安装了Nuxt入门模板：

npx create-nuxt-app fffff

进入内部后，fffff我安装了css-loder（npm install --save-dev css-loader），然后启动了服务器：npm run dev

我收到此错误消息：

> fffff@1.0.0 dev /home/begueradj/fffff
> nuxt



 INFO  Building project

? success Builder initialized
? success Nuxt files generated


 ERROR  Failed to compile with 1 errors                                                                                                                         22:09:09

 error  in ./layouts/default.vue

Module Error (from ./node_modules/eslint-loader/index.js):

/home/begueradj/fffff/layouts/default.vue
   89:1  error  Delete `··`                           prettier/prettier
   90:3  error  Delete `··`                           prettier/prettier
   91:1  error  Replace `······` with `····`          prettier/prettier
   92:1  error  Delete `··`                           prettier/prettier
   93:1  error  Replace `········` with `······` …

我试图在使用css-modules和webpack构建系统的react应用程序中使用关键帧动画.

最简单的例子,重现问题:

.confirmRemove {
  animation: 150ms appear ease-in;
}
@keyframes appear { ... }

编译为:

.comparators__confirmRemove__32JB0 {
  -webkit-animation: 150ms :local(appear) ease-in;
  animation: 150ms :local(appear) ease-in;
}

@keyframes comparators__appear__KTI43 { ... }

应该是什么:

.comparators__confirmRemove__32JB0 {
  -webkit-animation: 150ms comparators__appear__KTI43 ease-in;
  animation: 150ms comparators__appear__KTI43 ease-in;
}

@keyframes comparators__appear__KTI43 { ... }

我做过的事情

1. 尝试了各种各样的洒水用途:当地的地方
2. 发现了一个未解决的问题539,但过去一周内没有任何行动或回应
3. 尝试版本28.1(最新),27.3和锯26也不起作用
4. 考虑放弃网站开发
5. 评论拉请求
6. 试图解决问题264的所有步骤

我需要的

一个已知版本的css-loader,适用于关键帧动画和css模块或解决方案,直到作者修复.

其他相关信息

节点版本7.9

当前相关的package.json:

"autoprefixer": "7.1.1",
    "css-loader": "0.28.1",
    "extract-text-webpack-plugin": "2.1.0",
    "file-loader": "0.11.1",
    "node-sass": "4.5.3",
    "sass-loader": "6.0.5",
    "style-loader": "0.18.1",
    "url-loader": "0.5.8", …

我正在尝试在我的 reactjs 应用程序中使用 css 模块。我已经在webpack.config文件中添加了加载器。

 {
                test: /\.css$/,
                loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'

            },

但是，当我导入CSS文件中的我的应用程序，并尝试使用它classNames像{styles.example}那么它不会在我的CSS文件链接到。实例。

这就是我的做法：

import styles from './TestPage.css'

<div className={styles.example}></div>

这是行不通的。

组件没有样式。不过，我在控制台中没有收到任何错误。我该如何解决？

在我更改了tailiwind.config.js. 之后编译就不行了。它抛出以下错误。

error - ./src/assets/styles/global.css:3:1
Syntax error: Unknown word

  1 | @import 'tailwindcss/base';
  2 | @import 'tailwindcss/components';
> 3 | @import 'tailwindcss/utilities';
    |                                                              ^
  4 | @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
  5 | 
wait  - compiling...
error - ./src/assets/styles/global.css:3:1
Syntax error: Unknown word

  1 | @import 'tailwindcss/base';
  2 | @import 'tailwindcss/components';
> 3 | @import 'tailwindcss/utilities';
    |                                                              ^
  4 | @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
  5 | 
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/Users/Anjula/slinc-frontend/node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[6].use[1]!/Users/Anjula/slinc-frontend/node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[6].use[2]!/Users/Anjula/slinc-frontend/src/assets/styles/global.css': No serializer registered for CssSyntaxError
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems …