标签: css-loader

实现webpack资产管理教程.但是webpack不在输出路径中生成css文件

webpack.config.js

const config = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/build'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(jpeg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]'
            }
          }
        ]
      }
    ]
  }
};

索引.js

  import './style.css';
  import Icon from './yo1.jpg';

  function component() {
    var element = document.createElement('div');

    element.innerHTML = 'hello webpack'
    element.classList.add('hello');

    var myIcon = new Image();
    myIcon.src = Icon;

    element.appendChild(myIcon);

    return …

我正在尝试将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' …

鉴于此设置:

字体/ Styles.css中

@font-face {
  family: 'MyFont';
  src: url('fonts/myfont.otf');
}

我怎么能够:

1. 在我的JS包中,获取对CSS文件的URL的引用,例如字符串 [name].[hash].css
2. 生成的CSS文件应该是一个普通的CSS文件,但url()s指向生成的webfont文件？

就像是:

@font-face {
  family: 'MyFont';
  src: url('myfont.dds9394u329d9sa9r8439.otf');
}

我正在尝试:

webpack.config.js

{
  test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
  loader: 'file-loader',
  include: [/fonts/]
},

{
  test: /\.css$/,
  use: ['file-loader', 'css-loader'],
  include: [/fonts/]
}

JS文件

const myfont = {
  family: 'MyFont',
  stylesheet: require('fonts/styles.css')
}

根据上一个问题,使用file-loader并require()很好地获取CSS的URL,但生成的文件不是纯CSS.

如何组合file-loader和css-loader(+可能是其他加载器)来获取此CSS文件？

谢谢!

PS我想避免copy-webpack-plugin这个,因为我希望CSS /字体文件在代码中进行哈希处理和寻址.

对于我的特定项目，我需要控制 CSS 的缩小，并且只缩小某些文件。我非常接近OptimizeCSSAssetsPlugin使用该assetNameRegExp选项来选择要缩小的 CSS 文件的工作解决方案。

我花了一段时间试图弄清楚为什么我的所有其他 CSS 文件仍然被缩小。事实证明，sass-loader将永远再压缩你的CSS时，在生产模式下您是否希望它与否。

这是我的完整webpack.config.js.

const CopyWebpackPlugin = require('copy-webpack-plugin');
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
const FractalWebpackPlugin = require('fractal-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const path = require('path');
const PrettierPlugin = require('prettier-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = (env, argv) => {
    /**
     * Determine if is production mode from the command executed
     */
    const isProduction = argv.mode === …

我在带有 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] …

我将此配置用于我的webpack 2

        {
            test: /\.css$/i,
            use: ExtractTextPlugin.extract({
                use: 'css-loader?minimize'
            })
        }

如何根据字符串模式删除所有注释？我使用它但不起作用

  'css-loader?minimize&{discardComments:{removeAll:true}}'

谁能帮我 ？

我通过启用css-loader项目中的模块选项来使用bootstrap和CSS模块,不幸的css-loader是也在bootstrap文件上应用了作用域.

我有一个app.scss导入所有bootstrap sass文件的地方.然后我将app.scss文件导入我的app.js文件:

import "./app.scss";

  { test: /\.scss$/,
    use: [
        {loader: "style-loader"},
        {
          loader: "css-loader",
          options: {
            sourceMap: true,
            modules: true,
            localIdentName: "[path][name]__[local]--[hash:base64:5]"
          }
        },
        {loader: "sass-loader"}
      ]

例如bootstrap的.table类变成了类似的东西.app__table--19A_z

你怎么认为我可以为引导程序文件禁用CSS模块.

我将 CSS 模块与 webpack css-loader 一起使用，然后将它们与 mini-css-extract-plugin 捆绑在一起。这是我的配置的样子：

{
    test: /\.css$/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: "css-loader",
        options: {
          modules: true,
          localIdentName: "[name]-[local]_[hash:base64:5]",
          imports: true,
          importLoaders: 1
        }
      },
      "postcss-loader"
    ]
  }

出于某种原因（请参阅评论部分），我真的很想将 postcss-loader 应用到不是每个单独的 .css 文件，而是应用到整个包。我怎样才能做到这一点？

我使用Webpack创建了我的项目并在开发中使用了Vue.js,但我无法注入<style>Vue模板.

它让我

Module parse failed: Unexpected token (18:5)
You may need an appropriate loader to handle this file type.
| 
| 
> body {
|   background-color: red;
| }

这是我的 webpack.config.js

  ...
  module: {
    rules: [{
        test: /\.vue$/,
        loader: "vue-loader"
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        options: {
          presets: ["@babel/preset-env"]
        }
      },
    ]
  },

还有我的 App.vue

<template>
  <div id="app">
    <counter></counter>
  </div>
</template>

<script>
import Counter from "./app/Counter.vue";
export default {
  name: "app",
  components: {
    counter: Counter …

提前致谢。

我有以下 webpack 配置，

{
        test: /\.scss$/,
        use: extractPlugin.extract({
          use: [
            { 
              loader: 'css-loader',
              options: {
                minimize: true
              }
            },
            'sass-loader'
          ]
        })
      },
      {
        test: /\.(jpg|png|svg|gif)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: 'images/[name]-[hash].[ext]'
          }
        }],
      }

CSS 文件包含对不存在的图像的 url() 引用。我基本上无法清理 CSS，因为它是由其他团队的开发人员编写的。因此，Webpack 构建失败并出现 ModuleNotFoundError。如果找不到图像，我们可以让 webpack 忽略该图像吗？

这样的缺失图像大约有数百张。这个 CSS 的清理不在我的掌控之中。

任何帮助是极大的赞赏