标签: css-loader

我有问题,最小化extract-text-webpack-plugin输出的css文件

/* webpack.config.js */
...
loader: [{test: /\.css$/, loader: ExtractTextPlugin.extract('css?minimize')}]
...
plugins: [new ExtractTextPlugin("styles.css")]
...

/* test.js */
require('./file1.css')

/* file1.css */
@import './file2.css';
body {color: green;}
body {font-size: 1rem;}

/* file2.css */
body {border: 1px solid;}
body {background: purple;}

/* the output styles.css */
body{color:green;font-size:1rem}body{border:1px solid;background:purple}

在生成的styles.css中,有2个body标签.似乎缩小是在文件中执行的(在file1.css和file2.css中),但是当两个文件组合并提取到最终的styles.css中时不会.

如何在最终的style.css上进行缩小？所以输出是

body{color:green;font-size:1rem;border:1px solid;background:purple}

我正在使用的一些第三方模块有自己的CSS文件.我想将它们包含在我的应用程序的一个单个CSS文件中,该文件由Webpack处理.如何将"node_modules"下的CSS文件导入我的CSS文件？

例如,我正在使用第三方react-select模块,但我无法从node_modules以下位置导入其CSS文件:

@import 'react-select/dist/react-datetime.css';

相关的装载机webpack.config.js:

  {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
      use: [
        {
          loader: 'css-loader',
          options: {
            url: false
          }
        }
      ]
    })
  }

我对webpack相当新,但是在使用css-loader或file-loader时遇到了一些问题.

我正在尝试加载背景图像,但它不能正常工作.尽管devtools显示了background-image样式,但未显示背景图像.

如果我将background-image样式复制到element.style块中,一切正常.我在某个地方犯了一个愚蠢的错误吗？

body标签应该有背景图片.该样式出现在开发人员工具中,没有错误:

我可以加载文件5a09e4424f2ccffb6a33915700f5cb12.jpg,但身体没有背景.

如果我element.style在DevTools中手动复制并粘贴css行,一切正常:

如果我在Chrome和Firefox中捆绑使用webpack-dev-server或仅使用它,就会发生这种情况webpack.

其他款式,如body { background-color: red }做工精细.

这是webpack.config.js:

const path = require('path');

module.exports = {
    "entry": [
        './src/index.js'
    ],
    "output": {
        "path": path.join(__dirname, 'build'),
        "filename": "bundle.js"
    },
    devtool: "source-map",
    "module": {
        "loaders": [
            {
                "test": /\.scss$/,
                "loaders": ["style", "css?sourceMap", "sass?sourceMap"]
            },
            { 
                test: /\.jpg$/, 
                loader: "file-loader" 
            }
        ]
    },
    devServer: {
        contentBase: './build'
    }
};

我正在努力让源代码使用css-loader.

控制台输出:

来自css-loader的文档说:

SourceMaps

要包含SourceMaps,请设置sourceMap查询参数.

要求( "CSS-装载机？sourceMap!./ file.css")

我的webpack.config

var webpack = require('webpack')

module.exports = {
  entry: './src/client/js/App.js',

  output: {
    path: './public',
    filename: 'bundle.js',
    publicPath: '/'
  },

  plugins: process.env.NODE_ENV === 'production' ? [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin()
  ] : [],

  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' },
      { test: /\.scss$/, loaders: ['style', 'css', 'sass']},
      { test: /\.css$/, loader: "style-loader!css-loader?sourceMap!./file.css" },
      { test: /\.png$/, loader: "url-loader?limit=100000" },
      { test: /\.jpg$/, loader: "file-loader" }
    ] …

在CSS-装载机README建议localIdentName设置为

'[path][name]__[local]--[hash:base64:5]'

是否需要哈希后缀？它仍然是独一无二的吗？

'[path][name]__[local]'

为什么或者为什么不？

在这个GitHub问题讨论中#3是一个选项的事实让我相信它可能没有必要.

在我的项目中执行 NPM start 时遇到问题。我收到此错误消息：

./src/assets/base.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/react-scripts/node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/assets/base.scss)
Error: resolve-url-loader: CSS error
  source-map information is not available at url() declaration (found orphan CR, try removeCR option)

我正在尝试运行构建的 webpack-dev-server，但每次都失败并出现以下错误：

ERROR in ./src/style.css (./node_modules/css-loader/dist/cjs.js!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./src/style.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(1:1) Unknown word

> 1 | var api = require("!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
    | ^
  2 |             var content = require("!!../node_modules/css-loader/dist/cjs.js!./style.css");
  3 | 

我的 webpack.dev.js 看起来像这样：

const path = require('path');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    entry: './src/index.js',
    mode: 'development',
    devtool: 'inline-source-map',
    optimization: {
        usedExports: true,
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: …

我有以下package.json配置

"dependencies": {
"@angular/common": "2.2.1",
"@angular/compiler": "2.2.1",
"@angular/core": "2.2.1",
"@angular/forms": "2.2.1",
"@angular/http": "2.2.1",
"@angular/platform-browser": "2.2.1",
"@angular/platform-browser-dynamic": "2.2.1",
"@angular/router": "3.2.1",
"@angular2-material/button": "^2.0.0-alpha.8-2",
"@angular2-material/button-toggle": "^2.0.0-alpha.8-2",
"@angular2-material/card": "^2.0.0-alpha.8-2",
"@angular2-material/checkbox": "^2.0.0-alpha.8-2",
"@angular2-material/core": "^2.0.0-alpha.8-2",
"@angular2-material/grid-list": "^2.0.0-alpha.8-2",
"@angular2-material/icon": "^2.0.0-alpha.8-2",
"@angular2-material/input": "^2.0.0-alpha.8-2",
"@angular2-material/list": "^2.0.0-alpha.8-2",
"@angular2-material/menu": "^2.0.0-alpha.8-2",
"@angular2-material/progress-bar": "^2.0.0-alpha.8-2",
"@angular2-material/progress-circle": "^2.0.0-alpha.8-2",
"@angular2-material/radio": "^2.0.0-alpha.8-2",
"@angular2-material/sidenav": "^2.0.0-alpha.8-2",
"@angular2-material/slide-toggle": "^2.0.0-alpha.8-2",
"@angular2-material/slider": "^2.0.0-alpha.8-2",
"@angular2-material/tabs": "^2.0.0-alpha.8-2",
"@angular2-material/toolbar": "^2.0.0-alpha.8-2",
"@angular2-material/tooltip": "^2.0.0-alpha.8-2",
"ng2-material-dropdown":"0.5.4",
"ng2-toasty": "^2.2.2",
"@types/hammerjs": "^2.0.30",
"angular2-cookie": "1.2.3",
"angular2-material-datepicker": "^0.5.0",
"angulartics2": "^1.1.9",
"core-js": "^2.4.1",
"d3": "^4.3.0",
"es6-shim": "0.35.1",
"ng2-datetime-picker": "^0.11.3",
"ng2-tag-input": "0.6.0",
"ng2-auto-complete":"0.8.2",
"reflect-metadata": …

有一些关于style-loaderand 的SO 帖子css-loader，但尽管如此，我还是无法找到解决我的问题的方法。

简而言之，当我@import css在其他css文件中归档时，导入的css包含url()具有相对路径的 s 时，路径解析不正确。

基本上，错误消息表明 Webpack 最终认为url()导入的 css 中的路径是相对于src（主入口点），而不是相对于css它导入的文件：

// css-one.scss
@import "./assets/open-iconic-master/font/css/open-iconic-bootstrap.css";

// open-iconic-bootstrap.css
@font-face {
    src: url('../fonts/open-iconic.eot');
}

错误：

./src/main.scss 中的错误 (./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/src??ref--5-2!./node_modules/sass- loader/lib/loader.js??ref--5-3!./src/main.scss)

模块未找到：错误：无法解析'../fonts/open-iconic.eot'在 'C：\用户\ ... \ src'中 @ ./src/main.scss （./node_modules/css- loader??ref--5-1!./node_modules/postcss-loader/src??ref--5-2!./node_modules/sass-loader/lib/loader.js??ref--5-3！ ./src/main.scss) 7:106-141 7:172-207 @ ./src/main.scss @ ./src/index.js

我试过的：

• 我曾尝试convertToAbsoluteUrls在 style-loader 中使用该标志
• 我试图关闭所有源映射（在 style-loader 文档中提到）

我的 Webpack 配置文件（加载程序在底部）：

// css-one.scss …

使用带有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: …