标签: webpack-style-loader

我的问题是,如果我没有在output.publicPath配置选项中指定完整的域; 那么网址没有正确加载(至少字体).

我的webpack配置:

output: {
  ...
  publicPath: '/assets/'
},
module: { 
  loaders: {
    { 
      test: /\.less$/, 
      loader: "style!css?sourceMap!less?sourceMap" 
    },
    { 
      test: /\.(png|jpg|svg|gif|eot|woff|ttf)$/, 
      loader: 'file-loader?name=[path][name]-[hash].[ext]'
    }
  }
},
debug: true,
devtool: 'eval'

我有一个较少的文件说:

@font-face {
  font-family: 'new-sources';
  src: url('../../fonts/sources-icons-rev-4.eot');
  ...
}

我的服务器位于http:// localhost:5000.

当我在chrome中调试时检查生成的CSS时,我发现它已被替换为:

@font-face {
  font-family: 'new-sources';
  src: url(/assets/sdk/v1/fonts/sources-icons-rev-4-fad6f81d012ba56b350abdc714d1fa5a.eot);
  ...
}

这似乎是正确的!但无法正常工作Chrome dev工具报告错误:"无法解码下载的字体:http:// localhost:5000/widgets/damian/9789/en "表示它试图加载一个url的字体,但该url是我目前的位置,我在哪里提供HTML.我不知道为什么要尝试从该网址获取字体.

如果我去:http:// localhost:5000/assets/sdk/v1/fonts/sources-icons-rev-4-fad6f81d012ba56b350abdc714d1fa5a.eot.有用.

当我将publicPath更改为:' http:// localhost:5000/assets / ' 时,一切都解决了.但这是我想要避免的,无论如何我想了解为什么会发生这种情况.

我的猜测是,自从样式加载器,将CSS添加为Blob后,css会丢失"当前域"的概念,因此其中没有域的域名,行为奇怪.

但与此同时,这应该发生在每个使用CSS的webpack的人身上,我还没有看到任何关于它的评论.:S

谢谢!!!

如果我有一个react组件并且我想传入一个className,我该如何使用CSS模块执行此操作.它目前只提供className但不提供我将获得的哈希生成的css模块名称 <div className={styles.tile + ' ' + styles.blue}>

这是我的Tile.js组件

import React, { Component } from 'react';

import styles from './Tile.css';

class Tile extends Component {

  render() {

    return (
      <div className={styles.tile + ' ' + this.props.color}>
        {this.props.children}
      </div>
    );
  }
};

export default Tile;

Tile.css

@value colors: "../../styles/colors.css";
@value blue, black, red from colors;

.tile {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
}

.black {
  background-color: black;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
} …

有没有办法让 Vue.js 正确地与 CSP 一起工作？

当我运行我的spa应用程序（由npm run generateNuxt.js 生成）时，我会收到几个警告，例如：

拒绝应用内联样式，因为它违反了以下内容安全策略指令：“style-src 'self' 'strict-dynamic' 'nonce-124lk5fjOc4jn7qqLYEsG2jEvxYuqu8J' 'unsafe-inline' https:”。请注意，如果源列表中存在哈希值或现时值，则忽略 'unsafe-inline'。

知道CSP，有两种正确的方法可以解决这个问题：

1. 使用 nonces，其中 Vue.js 必须使用nonce属性对所有生成的脚本和样式进行签名。但我认为这不会解决任何问题，因为它似乎内联添加了一些 CSS。

2. 使用散列，这实际上是这样做的首选方式，因为散列准确地保护了我们希望客户端在浏览器上执行的内容。

但是，为了使用哈希，Vue.js/Webpack 必须能够计算其所有脚本和样式的哈希，并且：

• 对于每次编译，将它们告诉开发人员，然后将这些哈希添加到 NGINX 配置文件中，

或者，

• 能够生成包含散列的元标记，使此过程对开发人员 100% 透明，开发人员无需配置任何其他内容即可保证良好的 CSP 保护。

Vue.js 是否以任何方式支持这一点？世界上有没有人能够让 CSP 与 Vue.js 一起工作而没有任何“不安全的内联”？

我正在使用Webpack捆绑我的模块,并在基于反应的应用程序中使用sass进行样式化.

使用单独的样式表我正在设置组件的背景图像并加载该样式表index.js.样式表中的所有样式都应用于除背景图像之外的该组件.

这是我的样本样式表

$bg-img: url('/img/bg.jpg');

.show {
    position: relative;
    background: $black $bg-img center center;
    width: 100%;
    height: 100%;
    background-size: cover;
    overflow: hidden;
}

解决该问题的一种方法是明确要求图像,然后为反应组件创建内联样式.

img1 = document.createElement("img");
img1.src = require("./image.png");

但是,一旦我的样式表加载而不是分别要求每个图像,我想加载我的图像文件夹中的所有图像.

我的webpack配置文件是

module.exports = {
  devtool: 'source-map',
  entry: {
    main: [
      'webpack-dev-server/client?http://localhost:8080',
      'webpack/hot/only-dev-server',
      './src/index.js'
    ]
  },
  output: {
    path: path.join(__dirname, 'public'),
    publicPath: '/public/',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
   loaders: [
      { …

我在Webpack中遇到了关于相对路径的问题.让我试着解释一下这个场景:

我在Workspace目录中有2个单独的项目:

1. Project-A [使用Gulp捆绑]:稳定和工作
2. Project-B [使用Webpack捆绑]:新项目

由于两个项目都使用相同的样式,所以我想将项目A的SCSS文件[由标准变量,预定义布局,模态,类等组成]重用到项目B中.

现在,如果我尝试在Project-B index.scss中导入Project-A index.scss作为另一部分[ 注释掉背景图像URL依赖性 ],webpack能够生成所需的CSS输出文件.

// Import Project A SCSS [Common Varibles, Classes, Styling etc] 
@import "../../../../Project_A/assets/stylesheets/index";

但是,由于Project-A的index.scss进一步引用了相应Relative-Path的背景图像,因此webpack构建会抛出错误

'在XYZ/Project-B/Source/Stylesheets中找不到文件/目录'.

确切的错误块:

./src/assets/stylesheets/index.scss中的错误模块构建失败:ModuleNotFoundError:找不到模块:错误:无法解析'file'或'diWorkSpace\Project_B\src\assets\stylesheets

截图:

我无法理解为什么Webpack无法解决Project-A中的资产的相对路径并且仍在查看"项目B"内部.

以下是模拟问题的Code-Repo URL:https: //github.com/raviroshan/webpack-build-issue/tree/master/WorkSpace

重现步骤.

1. 下载回购.
2. 在Project_B文件夹中浏览,然后进行NPM安装.
3. 运行'webpack'.当相对图像URL代码被注释掉时,它将正确构建.
4. 现在放回注释的代码行:https: //github.com/raviroshan/webpack-build-issue/blob/master/WorkSpace/Project_A/assets/stylesheets/index.scss#L27

我试图遵循简单的入门(http://webpack.github.io/docs/tutorials/getting-started/).当我尝试加载style.css时,我收到此错误.

./entry.js中的错误找不到模块:错误:无法解析'计算机中的项目路径'中的'样式'突然改变:使用加载器时不再允许省略'-loader'后缀.您需要指定'style-loader'而不是'style'.@ ./entry.js 1:0-22

有任何想法吗 ？

我在本地使用mpm安装了css-loader和style-loader,如教程中所述.npm install css-loader style-loader

我看到安装后创建的node-modules文件夹.

构建服务器端react应用程序，并且在使用Webpack时，Style-Loader出现问题。

我正在使用版本“ ^ 0.23.1”，并且在运行脚本进行捆绑和构建时，Style-Loader出现了问题。

问题是 window is not defined

webpack:///./node_modules/style-loader/lib/addStyles.js?:23
    return window && document && document.all && !window.atob;

有没有人遇到这个问题？在查看了有关样式加载程序的Stack和Github问题之后，我没有找到任何解决方案。

这是我的webpack文件：

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

module.exports = {
  // webpack to use node
  target: 'node',
  entry: './src/index.js',
  output: {
    filename: 'client-build.js',
    path: path.resolve(__dirname, 'build/public'),
    publicPath: '/build/public'
  },
  module: {
    rules: [
      {
        test: /\.js$|\.jsx$/,
        loader: 'babel-loader',
        exclude: '/node_modules/',
        options: {
          presets: [
            '@babel/preset-react'
          ]
        }
      },
      {
        test: /\.(s*)css$/,
        loader: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.jpeg$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$|\.jpg$|\.pdf$/, …

这个警告在运行时被打印~20次webpack- 它处理和捆绑很好,但它是什么意思？我怎么摆脱它？

谷歌周围提供很少甚至没有帮助.

这是我的webpack配置:

const ExtractTextPlugin = require("extract-text-webpack-plugin");

var webpack = require("webpack");

module.exports = {
    entry: {
        dashboard: './js/main.js',
        vendor: ["fixed-data-table","react","react-dom","jquery", "bootstrap", "vis",],
    },
    output: { path: "../public", filename: 'bundle.js' },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({name: "vendor", filename: "static/vendor.bundle.js"}),
        new ExtractTextPlugin("/static/[name].css"),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
    ],

    module: {
        loaders: [
            {
                test: /.js?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: [
                        'es2015', 'react', 'stage-0',
                    ],

            }
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader'}), …

这是我第一次在这里写信，所以请记住这一点。我是第一次在项目中使用 webpack，我遇到了一个问题，我试图在我的 sass 文件中使用背景 url() 函数设置背景图像，如下所示：

.img-container {
  background: url('../../img/homepage-login-prog.jpg') no-repeat center center fixed;
  background-size: cover;
}

我的文件夹结构是：

- css
  | app.css
- dist (this folder is created after building for production)
- img
  | some-image.jpg
- js
  | app.js (entry point for webpack output, 
            this is where I import main.scss file)
- js-vendor
  | vendor.js (third-party libraries like bootstrap, jquery)
- sass  (this is where I keep all my sass files which get compiled using 
         webpack loaders)
  | components …

我正在 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', …