标签: css-loader

如果我有一个react组件并且我想传入一个className,我该如何使用CSS模块执行此操作.它目前只提供className但不提供我将获得的哈希生成的css模块名称 <div className={styles.tile + ' ' + styles.blue}>

这是我的Tile.js组件

import React, { Component } from 'react';

import styles from './Tile.css';

class Tile extends Component {

  render() {

    return (
      <div className={styles.tile + ' ' + this.props.color}>
        {this.props.children}
      </div>
    );
  }
};

export default Tile;

Tile.css

@value colors: "../../styles/colors.css";
@value blue, black, red from colors;

.tile {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
}

.black {
  background-color: black;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
} …

我是一个新的webpack,我已经能够把它打包我的javascript,但CSS让我望而却步.我一直得到一个:

"你可能需要一个合适的加载器来处理这个文件类型"

一个是我的css文件的第一行.CSS文件很简单:

body {
    color:red
}

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

module.exports = {
    debug: true,
    entry: [ './sdocs.js' ],
    output: {
        filename: './[name].bundle.js'
    },
    loaders: [
        { test: /\.css$/, loader: "style-loader!css-loader" },
    ],
}

sdocs.js也很简单,看起来像这样:

require('./sdocs.css');

最后运行webpack的结果如下所示:

ERROR in ./sdocs.css
Module parse failed: C:\Users\Tim\PhpstormProjects\xxx\sdocs.css
Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:5)
at Parser.pp.raise (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:923:13)
at Parser.pp.unexpected (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1490:8)
at Parser.pp.semicolon (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1469:73)
at Parser.pp.parseExpressionStatement (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1994:8)
at Parser.pp.parseStatement (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1772:188)
at Parser.pp.parseTopLevel (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1666:21)
at Parser.parse …

使用带有extract-text-webpack-plugin的css-loader中的css modules选项,Webpack 2 build在生产模式下无法正常工作.

在html元素上创建了正确的生成类,这意味着css-loader正在按预期工作,但是extract-text-webpack-plugin中提取的css文件缺少css标识符.

我正在使用一种方法来实现全局css和css模块,如下所述:https://github.com/css-modules/css-modules/pull/65 和这里:https://github.com/kitze/custom-react-scripts/issues/29.

我正在对以.css结尾的文件和以.cssm.css结尾的文件使用不同的加载器测试,表明它们应该使用模块加载.

配置的相关部分:

const extractTextPlugin = new ExtractTextPlugin({filename: '[name].[id].[contenthash].css', allChunks: true});

return {
    module: {
        rules: [
            {
                test: /\.cssm.(css|less)$/,
                loader: extractTextPlugin.extract({
                    fallbackLoader: 'style-loader',
                    loader: [
                        {
                            loader: 'css-loader',
                            query: {
                                importLoaders: 1,
                                modules: true,
                                localIdentName: '[name]_[local]_[hash:base64:5]'
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            query: {
                                ident: 'postcss',
                                plugins: function() {
                                    return [
                                            require('autoprefixer')
                                    ];
                                }
                            }
                        },
                        {
                            loader: 'less-loader'
                        }
                    ]
                })
            },
            {
                test: /\.(css|less)$/,
                include: …

我有一个项目有一组css文件(每个反应组件一个).我正在使用webpack中的css-loader(带模块)以及postcss-cssnext.

理想情况下,我想要一个单一的,variables.css所以我可以跨css文件共享变量.我试过variables.css包含类似的东西:

:root {
  --gutter-width: 1rem;
  --outer-margin: 2rem;
  ...
}

我然后导入所以它通过css加载器.问题是,其他文件没有接收到这些变量,所以要么这不起作用,要么我做错了(包括在组件css文件中直接工作).

有效的一件事是拥有一个styles.json带有以下webpack设置的文件:

postcss: function (webpack) {
    return [
        ...
        require("postcss-cssnext")({
          features: {
            customProperties: {
              variables: require('./src/styles.json')
            }
          }
        })
        ...
    ]
}

这个问题的主要问题是每次我改变一个变量我都要重新启动webpack dev服务器(所以重新加载webpack配置).这不太理想.

那么,有什么想法更好地做到这一点？

我试图遵循简单的入门(http://webpack.github.io/docs/tutorials/getting-started/).当我尝试加载style.css时,我收到此错误.

./entry.js中的错误找不到模块:错误:无法解析'计算机中的项目路径'中的'样式'突然改变:使用加载器时不再允许省略'-loader'后缀.您需要指定'style-loader'而不是'style'.@ ./entry.js 1:0-22

有任何想法吗 ？

我在本地使用mpm安装了css-loader和style-loader,如教程中所述.npm install css-loader style-loader

我看到安装后创建的node-modules文件夹.

生产构建失败并出现以下错误：

ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'minimize'. These properties are valid:
   object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals? }
    at validate (/Users/username/Sites/projectname/node_modules/css-loader/node_modules/schema-utils/dist/validate.js:85:11)
    at Object.loader (/Users/username/Sites/projectname/node_modules/css-loader/dist/index.js:34:28)

使用这个 webpack 模板：http ://vuejs-templates.github.io/webpack/ ，更新到 Webpack 4 并面临构建问题，package.json：

{
  "name": "projectname",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config webpack.config.js --port 3000 --hot",
    "start": "npm run dev",
    "build": "cross-env NODE_ENV=production …

我有一个项目设置,我用它ExtractTextPlugin来创建一个CSS文件.我试图创建使用注入到页面的样式开发的WebPack配置style-loader,css-loader和sass-loader.

据我所知,默认行为是将样式注入到<style />标记中,我删除了所有痕迹,ExtractTextPlugin但它仍然不想注入样式.

有谁知道什么可能导致样式丢失？我的Webpack配置如下.

配置:

const webpack = require('webpack')

module.exports = config => Object.assign({}, {
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new webpack.SourceMapDevToolPlugin({
      filename: 'bundle.js.map'
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ]
}, config)

叫:

module.exports = require('../../dev')({
  name: 'Onboarding',
  entry: './src/apps/components/Onboarding/index.js'
})

我将 Storybook 与 webpack 5 一起用于一个简单的项目，尽管为 Storybook 自定义了 webpack 配置，但我在 CSS 模块导入方面遇到了挑战。

(2:7) src/stories/header.css Unknown word

  1 | 
> 2 |       import API from "!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../../node_modules/style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../../node_modules/style-loader/dist/runtime/insertBySelector.js";

    at processResult (./node_modules/webpack/lib/NormalModule.js:743:19)
    at ./node_modules/webpack/lib/NormalModule.js:844:5
    at ./node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at ./node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (./node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (./node_modules/@storybook/builder-webpack5/node_modules/css-loader/dist/index.js:155:5)
    at runNextTicks (node:internal/process/task_queues:61:5)
    at processImmediate (node:internal/timers:437:9)
ModuleBuildError: Module build failed (from ./node_modules/@storybook/builder-webpack5/node_modules/css-loader/dist/cjs.js):
CssSyntaxError

我的 main.js 文件如下所示

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: …

我正在尝试将CS​​S模块实现到我正在使用React和Webpack的项目中.但是,我想继续使用我创建的所有全局css.

例如,之前我在React中导入了css,就像这样

import './styles.scss'

然后,会有一个使用.button内部存在的类的html元素./styles.scss

<button className='button'>Click me</button>

既然我想实现CSS模块,我css-loader就像这样在webpack中修改了配置

module: {
  rules: [{
    test: /\.s?css$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          // This is where I added the config for css modules
          modules: true,
          localIdentName: '[hash:base32:5]-[name]-[local]',
          importLoaders: 2,
        }
      },
      {
        loader: 'postcss-loader',
        options: {
          config: {
            path: './postcss.config.js',
          },
        },
      },
      'sass-loader',
    ]
  }]
}

但是,现在我button在导入时不能使用classname

import './styles.scss'

因为类名./styles.scss都被转换为基于哈希的类名32osj-home-button

基本上,当我以这种方式导入时,如何配置css-loader以正常加载css

import './styles.scss'

但是当我以这种方式导入时使用css模块？

import styles from './styles.scss' …

我在带有 Webpack 的 Angular 项目中使用 CSS 模块。我已经用postcss-modules转换了.css和.scss文件中的类名。

然后使用posthtml-css-modules我更改了 html 元素中 class 属性的值，用于由 postcss-modules.

我可以说一切正常。

现在，我有一个新的挑战要解决。

Angular 有一项功能，允许您class 根据条件动态更改html 元素中的值：

https://angular.io/api/common/NgClass

例如，我可以这样做：

<div [className]="myVar ? 'myClass1' : 'myClass2' " >

如果myVar = true，则 html 元素将是：

<div class="myClass1" >

如果myVar = false，则 html 元素将是：

<div class="myClass2" >

就像我不知道myVar在编译期间的值是什么（因为 的值myVar取决于用户操作）我无法设置值<div css-module="myClass1" > 或<div css-module="myClass2" >为了散列myClass1or的类名myClass2。

但是（这是我的解决方案）...

如果我可以调用相同的函数[hash:base64:5] …