标签: webpack-style-loader

我一直在开发的 chrome 扩展在 Firefox 上运行良好，但每当我尝试在 chrome 上运行它时，webpackstyle-loader都会抛出此错误：

Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.

一旦我删除了 css 导入，扩展就会运行，但我需要扩展的 css。

So according to this question, css-loader loads file as string, resolves webpack dependency according to require, and style-loader inserts style tag into page, and in many cases, css-loader can be replaced by raw-loader.

I'm currently using:

loader: ExtractTextPlugin.extract("raw-loader!postcss-loader!sass-loader?sourceMap&" + sassIncludePaths.join(""))

And there are requires in the .scss files, but I don't see a problem with raw-loader yet. So question is:

1. What exactly is the difference between the two?
2. What might be a problem if I were …

我只是想知道为什么我的 css 名称在我构建并运行我的 react + webpack 应用程序后变成了哈希。是否有我可能错过的高级配置以正常设置 css 名称？

这是我的 webpack 配置：

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: './app/app.jsx',
    output: {
        path: __dirname,
        filename: './public/bundle.js'
    },
    resolve: {
        alias: {
            applicationStyles: path.resolve(__dirname,'app/styles/app.css'),
            Clock: path.resolve(__dirname,'app/components/Clock.jsx'),
            Countdown: path.resolve(__dirname,'app/components/Countdown.jsx'),
            CountdownForm: path.resolve(__dirname,'app/components/CountdownForm.jsx')
        },
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        } …

我正在尝试设置React组件的样式。为此，我导入一个css文件并使用className，如ReactJs文档中所示。

我已经在我的webpack.config.js文件中添加了一个css-loader + style-loader，如下所述：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: "development",
  entry: "../src/index.js",
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "bundle.js",
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: '../dist',
    port: 8080
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin(
    {template: '../src/index.html'}
  )]
}

这是我的App.js React组件：

import …

我试图按照这里的教程https://webpack.js.org/guides/asset-management/ 但是我永远无法加载 css 文件。（文字从不红色）

https://github.com/bryandellinger/webpackassetmanagement

> --dist
> ----bundle.js
> ----index.html
> --src
> ----index.js
> ----style.css

webpack.config.js

const path = require('path');
    module.exports = {
      entry: './src/index.js',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
      },
       module: {
         rules: [
           {
             test: /\.css$/,
             use: [
               'style-loader',
               'css-loader'
             ]
           }
         ]
       }
    };

包.json

{
  "name": "webpack1",
  "version": "1.0.0",
  "description": "webpack tutorial",
  "private": true,
  "scripts": {
    "dev": "lite-server",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^1.0.0",
    "style-loader": "^0.22.1", …

vue.js在我的webpack.config.js文件中的一个项目中，我确实有这个：

///...,
resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.common.js',
    'assets': path.resolve(__dirname, './src/assets'),
    'components': path.resolve(__dirname, './src/components')
  }
},
// ....

这允许我在任何情况Vue component下使用其他组件，如下所示：

import 'component/path/to/MyComponent'

不必想知道我可能会在我的组件树中的哪个位置。

我希望你有同样的能力，styles特别是与`stylus`

假设我有一个stylus file' insrc/assets/funcs.styl：

add(a)
  a + a

和一个组件说src/components/a/very/long/path/MyComponent.vue：

<template>
  <div id="my-component">
    <h1>{{ msg }}</h1>
  </div
</template>

<script>

export default {
  name: 'my-component',
  data () {
    return {
      msg: 'A title'
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "../../../../../../assets/funcs.styl"

h1
 margin …

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

除了一件事,能够把所有东西都搞砸了.我正在项目中使用带有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 …

下面是我的webpack.config.js和package.json

module.exports = {
  entry: "./entry.js",
  output: {
     filename: "./build/js/bundle.js"
  },
  module: {
    rules: [
      {
        test: /.\js$/,
        use: [
          {
            loader: 'babel-loader',
        options: {
          presets: ["es2015"]
        }
      }
    ]
  },
  {
    test: /.\css?$/,
    include: __dirname + "./src/css",
    exclude: __dirname + "./src/js",
    use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true
          }
        }
      ]
  }
]
  },
  plugins: [
     // new UglifyJsPlugin()
  ]
}


"dependencies": {
    "ajv-keywords": "^3.1.0",
    "ajv": "^6.0.0",
    "axios": "^0.17.1",
    "babel-minify-webpack-plugin": "^0.3.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "install": "^0.10.4",
    "npm": …

让我们说这是你的SCSS:

.someclass {
  background: red;
  height: 1500px;
  width: 10000px;
}

这就是你如何使用它:

import React, { Component, PropTypes } from 'react'
import ReactDropZone from 'react-dropzone'
import ReactDOM from 'react-dom'
import withStyles from 'isomorphic-style-loader/lib/withStyles'
import s from './ImageTool.scss'

class ImageTool extends Component {

  render() {

    return (

      <div className={s.someclass}></div>

    )

  }

}

export default withStyles(ImageTool, s)

所以这很好用.

现在,如果你需要为你的课程命名,会发生什么some-class？显然className={s.some-class}不起作用,也没有className={s.someClass}(没有任何反应).

所以我有以下 webpack 配置：

import path from 'path';

module.exports = {
    entry: {
    index: './dev/index.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: './dist/',
        filename: 'bundle.js',
        chunkFilename: '[id].bundle.js'
    },
    module:{
        loader:{
            test: /\.js$/,
            exclude:path.resolve(__dirname, "node_modules"),
            loader: 'js'
        }
    }

};

问题是，当我做文件时，每次更改都会webpack --watch在/dist/文件夹中构建。然而，当我运行这些webpack-dev-server文件时，甚至都没有构建。这是为什么？

请帮忙。

我正在努力根据以下内容在docker容器中获取webpack开发服务器设置 node:latest

尽管尝试了Node Sass中的所有各种错误，都无法找到适合您当前环境的绑定，但我仍然遇到相同的错误：

web_1         | ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./src/sass/style.sass
web_1         | Module build failed: Error: Missing binding /prject/node_modules/node-sass/vendor/linux-x64-59/binding.node
web_1         | Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 9.x
web

这是当前

# Dockerfile
RUN yarn cache clean && yarn install --non-interactive --force
RUN rm -rf node_modules/node_sass
RUN npm rebuild node-sass

重建步骤表明已安装二进制文件并签出：

Binary found at /advocate/node_modules/node-sass/vendor/linux-x64-59/binding.node
Testing binary
Binary is fine

我也感到困惑的是

web_1         | Found bindings for the …