标签: css-loader

我在两台不同的 PC 上遇到了一个问题。对于我的项目，我为开发安装了以下依赖项：（webpack webpack-cli @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader style-loader html-webpack-plugin）和反应和反应-dom。当我尝试在我的项目的任何组件中导入一些样式表时，问题就出现了，错误是：import api from "!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"; . 我有点困惑，因为我检查了很多次自己完成的其他 webpack 配置，它们与我现在使用的相同。你的建议是什么？谢谢！

我正在使用带有 css-loader 的 webpack 来加载我的 css 样式并将它们添加到 React 组件中。

import styles from '../styles/cell.css';

.cell {
    border-radius: 50%;
    background-color: white;
}

<div className={styles.cell} />

我正在动态计算单元格的高度/宽度。在这里他们描述了如何动态地向组件添加样式，但我更喜欢在没有 style 属性的情况下这样做。

我尝试在其中一个父组件中执行此操作，认为它可能会更改 css 类，但这似乎不起作用。

import cell_styles from '../styles/cell.css';
cell_styles.width = this.cellSize + 'px'
cell_styles.height = this.cellSize + 'px'

关于如何最好地做到这一点的任何反馈？

我正在使用 Express 构建一个 React 应用程序，我尝试添加一个样式加载器/css 加载器以启用导入 css，但是当我启动我的服务器时，我收到以下错误：

M:\MainFiles\MyStuff\Code\react\FlexBoardToolBox>npm run start:dev

> flex_board@1.0.0 start:dev M:\MainFiles\MyStuff\Code\react\FlexBoardToolBox
> cross-env NODE_ENV=development && npm run build:dev && nodemon --exec babel-node -- src/server/server.js


> flex_board@1.0.0 build:dev M:\MainFiles\MyStuff\Code\react\FlexBoardToolBox
> webpack -d

Hash: 1b4953ee761d210e2488
Version: webpack 2.2.1
Time: 2567ms
    Asset     Size  Chunks                    Chunk Names
bundle.js  2.54 MB       0  [emitted]  [big]  js
   [6] ./~/react/react.js 55 bytes {0} [built]
  [23] ./~/react/lib/React.js 2.71 kB {0} [built]
  [24] ./~/react-router-dom/es/index.js 2.21 kB {0} [built]
  [89] ./~/react-router-dom/es/Link.js 4.67 kB {0} [built]
  [94] ./~/react-dom/index.js 58 …

我在webpack上有一个CSS模块规则

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

启用模块modules=true会给我以下错误:

ERROR in ./node_modules/css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]!./src/global.css
Module not found: Error: Can't resolve '~/antd/dist/antd.css' in '[REDACTED]'
 @ ./node_modules/css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]!./src/global.css 3:10-141
 @ ./src/global.css
 @ ./src/entry.jsx

这发生在CSS线上

@import '~/antd/dist/antd.css';

antd是一个依赖node_modules.

但是,modules=true从加载器中删除似乎不会从此导入行生成错误.

我需要CSS模块,我需要导入这个CSS.我怎样才能解决这个问题？

在我的 webpack 配置中，我希望能够定义一个全局的 less-variables 文件，该文件将包含在每个 less 组件中。

使用 sass-loader 您可以提供以下选项：

loaderOptions: {
    data: "@import 'globals.sass'"
}

我能用 less-loader 找到的唯一选项是 globalVars：

loaderOptions: {
    globalVars: {}
}

现在，这一切正常，但是 globalVars 需要一个带有键值对的对象。我宁愿在每个组件都附加一个 theme.less 。使用 less-loader 可以做到吗？

我正在使用打字稿构建基本的反应应用程序，但我无法在index.tsx文件中导入 CSS文件

我可以通过以下方式导入index.css文件：

import './index.css'; 
//this import gives typescript error when running webpack 

但无法导入为

import * as Styles from './index.css';

这是我的webpack.config.js文件

var path = require("path");
var HtmlWebpackPlugin = require('html-webpack-plugin')
var config = {
    mode:"none",
    entry:"./src/index.tsx",
    output:{
        path: path.resolve(__dirname,"dist"),
        filename: "bundle.js"
    },
    resolve:{
        extensions:[".ts", ".tsx", ".js"]
    },
    module:{
        rules:[
            {test:/\.tsx?$/, loader:"awesome-typescript-loader"},
            { test: /\.css$/, include: path.join(__dirname, 'src/'),
             loader:"typings-for-css-modules-loader" }
        ]
    },
    plugins:[new HtmlWebpackPlugin({
        template: './index.html'
    })]
};

module.exports = config;

我在发布之前尝试了以下链接，但没有运气

如何在 .tsx 打字稿中包含 .css …

有人做了一个很好的例子，根据是否使用 JS 模块删除未使用的 CSS，但我试图弄清楚如何从组件中删除未使用的 CSS 类，这些类实际上并未被组件使用。

例子

// Sub.scss
.sub-container {
  background-color: green;
}

.unused-junk {
  color: blue;
}


// Sub.js
import React from "react";

import styles from "./Sub.scss";

export default function Sub() {
  return <div className={styles.subContainer}>Hi from sub.</div>;
}


// App.scss
.app-container {
  background-color: red;
}


// App.js
import React from "react";
import ReactDOM from "react-dom";

import Sub from "./Sub";
import styles from "./App.scss";

function App() {
  return (
    <div className={styles.appContainer}>
      Hi from app.
      <Sub />
    </div> …

目前正在为一个运行 React v15 的项目做维护。升级了 Webpack 3 > 4、Babel 6 > 7、css-loader 0.28.x > 3.0.0 等。

最初，更新 React 并使用所有 react-codemod + jscodeshift 转换 js 文件。虽然那个阶段的版本不稳定，但它加载并显示了正确的样式等。

我觉得奇怪的是，在更新 file-loader、css-loader、babel 和相关包后，我一直得到Module not found: Error: Can't resolve，如下所示：

ERROR in ./app/sharedComponents/TitleGeneric/style.css (./node_modules/css-loader/dist/cjs.js??ref--6-1!./app/sharedComponents/TitleGeneric/style.css)
Module not found: Error: Can't resolve './sharedStyles/typography.css' in '/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric'
resolve './sharedStyles/typography.css' in '/Users/userX/www/my-project-ui/app/sharedComponents/TitleGeneric'
  using description file: /Users/userX/www/my-project-ui/package.json (relative path: ./app/sharedComponents/TitleGeneric)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/userX/www/my-project-ui/package.json (relative path: ./app/sharedComponents/TitleGeneric/sharedStyles/typography.css)
      no extension
        Field 'browser' doesn't contain a …

错误：模块构建失败：ValidationError：选项对象无效。CSS Loader 已使用与 API 架构不匹配的选项对象进行初始化。

• options 有一个未知属性“localIdentName”。这些属性有效：object { url?, import?, module?, icss?, sourceMap?, importLoaders?, esModule? }

下面是我的 create-react-app 的 package.json 文件，
请帮我找到错误。

         {
          "name": "burger-project",
          "version": "0.1.0",
          "private": true,
          "dependencies": {
          "autoprefixer": "7.1.6",
          "axios": "^0.19.2",
    
     "babel-core": "6.26.0",
           "babel-eslint": "7.2.3",
                "babel-jest": "^26.3.0",
                "babel-loader": "7.1.2",
                "babel-preset-react-app": "^3.1.2",
                "babel-runtime": "6.26.0",
                "case-sensitive-paths-webpack-plugin": "2.1.1",
                "chalk": "1.1.3",
                "dotenv": "4.0.0",
                "dotenv-expand": "4.2.0",
                "eslint": "4.10.0",
                "eslint-config-react-app": "^2.1.0",
                "eslint-loader": "1.9.0",
                "eslint-plugin-flowtype": "2.39.1",
                "eslint-plugin-import": "2.8.0",
                "eslint-plugin-jsx-a11y": "5.1.1",
                "eslint-plugin-react": "7.4.0",
                "extract-text-webpack-plugin": "3.0.2",
                "file-loader": "1.1.5",
                "fs-extra": "3.0.1",
                "html-webpack-plugin": "2.29.0",
                "jest": "^26.4.2",
                "object-assign": …

在 Gatsby v2 中，您可以className={styles["block__element--modifier"]}通过将以下代码添加到来启用此语法gatsby-node.js：

const process_rule = rule => {
  if (rule.oneOf) {
    return {
      ...rule,
      oneOf: rule.oneOf.map(process_rule),
    };
  }

  if (Array.isArray(rule.use)) {
    return {
      ...rule,
      use: rule.use.map(use => {
        const css_loader_regex = /\/css-loader\//;

        if (!css_loader_regex.test(use.loader)) {
          return use;
        }

        return {
          ...use,
          options: {
            ...use.options,
            camelCase: false,
          },
        };
      }),
    };
  }

  return rule;
};

exports.onCreateWebpackConfig = ({ getConfig, actions }) => {
  const config = getConfig();

  const new_config = {
    ...config,
    module: {
      ...config.module, …