标签: webpack-style-loader

我正在 VUE 中开发我的第一个应用程序我在项目的根目录创建了一个样式文件，另一个包含我想全局使用的字体。我正在尝试修改组件的样式以能够声明“”，从而能够全局使用这些样式。按照有关该主题的官方文档和文章，我没有看到启动控制台的错误的解决方案

"./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler 中的错误？{"vue":true,"id":"data-v-7ba5bd90","scoped": false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue ”

这是我的 vue.config.js

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "@/styles/_variables.scss";`
            }
        }
    },
}

这里是我的 webpack.config.js

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

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              prependData:
              `@import "@/styles/_variables.scss";`
            }
          }
        ],
      }, 
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader', …

我需要所有的iamges相对于本地样式表.如果我添加root =.,我虽然预先添加到url(/ path /)然后我需要添加一个文件加载器,但无论如何路径都是错误的.

如果我直接在CSS中编写相对路径,那么我还需要使用文件加载器.如果我在CSS中编写非相对路径,那么CSS路径没有变化但是图像无法加载,因为它们必须相对于样式表位置,没有其他方法可以正确加载它们.我还使用ExtractTextPlugin来为CSS提供单独的文件,但无论如何路径都是错误的,有或没有ExtractTextPlugin.

我有一个相当复杂的样式表加载程序设置:

  {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract("style",
      "css?sourceMap&localIdentName=[path][name]__[local]__[hash:base64:5]!sass?outputStyle=expanded&" +
      "includePaths[]=" + other stuff)
    )
  }

哪个效果很好,但有些要求我想将modules选项添加到css-loader中,所以它看起来像这样:

require('./foo.scss!css?modules&sourceMap&localIdentName=[path][name]__[local]__[hash...');

但我无法在这个地方做到这一点.

我如何配置它,以便我可以在某些需求上启用css-loader模块标志,同时保持其余部分相同？

也许像装载机'别名',例如require('./foo.scss!my-scss-with-modules-flag-alias')？

我能想到的唯一解决方案是编写一个加载器,它进行语法转换,将加载器配置内联到某些需要的调用......但这很脆弱且复杂.

我正在Intellij Idea中开发一个JavaScript/React应用程序,我正在webpack-dev-server逐步构建我的文件.这意味着开发服务器正在监视文件,如果文件发生更改,则webpack重建它.很标准的场景.

不幸的是,webpack有时会决定忽略某些文件.我可以随心所欲地改变它们,但webpack什么都不做.我无法确定哪些文件被忽略的模式.这是武断的.有时我只是创建一个新文件并webpack忽略它.

有趣的是,只有当我使用Intellij Idea执行保存时才会发生这种情况.如果我在另一个编辑器(例如vim)中打开该文件并保存它,则会正确地重建该文件.实际上,简单touch file.js就足以触发重建.

我猜Intellij Idea如何保存文件有问题.有任何想法吗？

我正在使用webpack-dev-server来加载我的所有资产,包括CSS.目前,我的CSS在JavaScript之后加载,这导致我的应用程序问题在某些依赖于布局存在的地方.

如何确保在JavaScript执行之前加载CSS？

我认为必须有一种方法可以做到这一点module,也许我可以勾选一个回调？或者可能通过配置样式加载器来优先考虑？

这是我的index.js:

import './styles/main.scss';
import './scripts/main.js';

if (module.hot) {
  module.hot.accept();
}

这是我的样式加载器:

{
        test: /\.(scss)$/,
        loader: 'style!css?&sourceMap!postcss!resolve-url!sass?sourceMap'
},

在这个样式加载器Github问题上也提出了类似的问题:https://github.com/webpack/style-loader/issues/121

从css文件导入样式.返回空对象.似乎css-loader无法正常工作.谁可以帮我这个事.请在下面找到参考文件

index.js

import React from 'react'   
import style from './header.css'

console.log(style) // Returning empty object

export default class Header extends React.PureComponent {
  render() {
    return(
      <header className = {style.header}>
        This is header component
      </header>
    )
  }
}

./header.css

.header {
  background: #007DC6;
}

./webpack.config.js

{
  test: /\.css$/,
  exclude: /node_modules/,
  loaders: ['style-loader', 'css-loader'],
}, {
  test: /\.css$/,
  include: /node_modules/,
  loaders: ['style-loader', 'css-loader'],
}

我想强制webpack为特定的文件/文件夹启用特定的插件或加载器,乘以文件.有办法吗？

实现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 …

将 npm & node 更新到最新版本后，当我尝试运行我的 vue 项目时出现以下错误：

未找到这些依赖项：

• !!vue-style-loader!css-loader!../../../../../../../../../swlkagenda/1.2.0/build/node_modules/vue -loader/lib/style-rewriter?id=data-v-c906422a&scoped=true!wisaapp/login/login.css 在 /home/projects/wisaweb/trunk/app/modules/wisaapp/login/login.vue

我的所有 vue 文件都出现相同的错误，如下所示：

登录.vue：

<template src="wisaapp/login/login.html"></template>
<script src="wisaapp/login/login.js"></script>
<style src="wisaapp/login/login.css" scoped></style>

我写的第一条错误消息是针对cssvue 文件中的引用文件。对于js文件，我收到以下错误：

• !!babel-loader!wisaapp/login/login.js 在 /home/projects/wisaweb/trunk/app/modules/wisaapp/login/login.vue

.js和.css文件的路径之前是相对的，但没有任何区别。

有什么问题？

这是我的 package.json：

{
  "name" : "",
  "version" : "",
  "description" : "",
  "author" : "",
  "private" : true,
  "scripts" : {
    "dev" : "node build\/dev-server.js",
    "build" : "node build\/build.js",
    "unit" : "cross-env BABEL_ENV=test karma start test\/unit\/karma.conf.js --single-run",
    "e2e" : "node test\/e2e\/runner.js",
    "test" : …

我正在使用Mini CSS Extract Plugin将 CSS 拆分为distwebpack 项目文件夹中自己的文件。

我的webpack.config.js文件如下所示：

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

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

当我 时，这会在我的文件夹中npm run build构建文件，该文件与我的文件夹中的文件相同。我必须包括style.cssdiststyle.csssrc

<head>
  ...
  <link rel="stylesheet" type="text/css" href="style.css" />
</head> 

index.html在文件夹的头部，dist …