标签: webpack-style-loader

如何在webpack中包含materialize-css npm包

我正在编写一个使用Webpack的客户端应用程序,我无法弄清楚如何要求materialize-css包.我正在使用Henrik Joreteg的hjs-webpack包,并且通过在sass文件(例如@import 'yeticss')中导入包含了nic包,但这不适用于实现.import 'materialize-css'像任何其他包一样直接在代码中(例如在JS文件中)也不起作用.

css materialize npm webpack webpack-style-loader

neu*_*mic

lucky-day

17
推荐指数

2
解决办法

1万
查看次数

升级到Angular 8.3.5后，Angular应用程序不会加载应用程序模块/组件

我们有一个Angular 4我最近尝试升级到的项目Angular 8。我遵循了Angular网站上的迁移指南，更改了某些语法，并且阻止了项目的构建。我遇到了我的样式无法在本地正确加载并且根本不在Azure上加载的问题。我找到Webpack并尝试配置它，添加了style-loader，sass-loader和css-loader。现在，当我在本地运行时，可以在浏览器的“网络”选项卡中看到所有样式均已正确加载，但它仅加载默认的index.html文件，而没有引导应用程序。

当我在Azure上部署应用程序时，它会加载其他组件，但是没有一种样式会加载。我花了3周的时间进行迁移，但仍然没有希望。

工具/插件版本：

Angular CLI: 8.3.5
Node: 10.15.1
OS: win32 x64
Angular: 8.2.7
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.5
@angular-devkit/build-angular     0.803.5
@angular-devkit/build-optimizer   0.803.5
@angular-devkit/build-webpack     0.803.5
@angular-devkit/core              8.3.5
@angular-devkit/schematics        8.3.5
@angular/cdk                      8.2.0
@angular/cli                      8.3.5
@angular/http                     5.2.11
@angular/material                 8.2.0
@ngtools/webpack                  8.3.5
@schematics/angular               8.3.5
@schematics/update                0.803.5
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.40.2

Run Code Online (Sandbox Code Playgroud)

这是我的Webpack配置：

const { resolve } = require('path');
const rxPaths = …

Run Code Online (Sandbox Code Playgroud)

webpack webpack-style-loader angular-upgrade angular angular8

Mus*_*adi

2019 09-27

16
推荐指数

1
解决办法

469
查看次数

通过 Webpack 将 CSS 样式注入到 shadow root

我正在尝试修改使用 shadow root 创建的 web 组件的样式。

我看到样式被添加到head标签中，但它对shadow root封装没有影响。

我需要的是加载所有组件的样式并使它们在shadow root.

这是创建 Web 组件的一部分：

索引.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
import './tmp/mockComponent.css'; // This is the styling i wish to inject


let container: HTMLElement;

class AssetsWebComponent extends HTMLElement {

    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        const { shadowRoot } = this;
        container = document.createElement('div');
        shadowRoot.appendChild(container);
        ReactDOM.render(<App />, container);

    }
}

window.customElements.define('assets-component', AssetsWebComponent);

Run Code Online (Sandbox Code Playgroud)

App.ts // 常规反应组件 …

css shadow-dom reactjs webpack webpack-style-loader

alb*_*rtR

lucky-day

16
推荐指数

3
解决办法

3476
查看次数

如何使用webpack从node_modules加载静态CSS文件？

我不知道如何使用webpack从node_modules libs加载任何CSS,例如我安装了传单,每次加载尝试都leaflet/dist/leaflet.css失败了.

你能举例说明如何从node_modules加载静态样式吗？

我目前的webpack配置如下.另外我正在使用extract-text-webpack-plugin和sass-loader我的项目scss文件运行良好,我也css-loader有,我有解决静态CSS文件或添加一些东西stylePathResolves？

//require('leaflet/dist/leaflet.css');

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require("webpack");
var path = require('path');

var stylePathResolves = (
  'includePaths[]=' + path.resolve('./') + '&' +
  'includePaths[]=' + path.resolve('./node_modules')
)

module.exports = {
  entry: ".js/app.js",
  output: {
    path: "./static/js",
    filename: "app.js"
  },
  module: {
    loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel'
      }, {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(
          'style',
          'css' + '!sass?outputStyle=expanded&' + stylePathResolves
        )
      }
    ]
  },
  plugins: …

Run Code Online (Sandbox Code Playgroud)

javascript css webpack webpack-style-loader

luz*_*zny

2015 12-16

15
推荐指数

1
解决办法

1万
查看次数

将 CSS 模块注入每个组件的样式元素（为了可移植到 shadow root）

翻译：博士

如何让 React 组件的 CSS 在影子根中工作，同时保持 CSS Modules 类的封装优势？我想插入每个组件的<style>元素而不是内部<head>或另一个任意元素。

我拥有的

我目前正在 React 中使用带有自定义 Webpack 脚本的 CSS 模块；[style-loader, css-loader, sass-loader]以传统方式。生成的编译后的 CSS 作为<style>标签注入head.


    // MyComponent.jsx
    import React from 'react';
    import styles from './MyComponent.scss';

    export const MyComponent = () => {
      return <div className={styles.container}>Hello!</div>
    }

    // MyComponent.scss
    .container {
      background: purple;
    }

Run Code Online (Sandbox Code Playgroud)

结果

    <!-- rendered page -->
    <head>
      ...
      <style>.myComponent__container__hash123 { background: purple }</style>
    </head>
    <body>
      ...
      <div class="myComponent__container__hash123">Hello!</div>
    </body>

Run Code Online (Sandbox Code Playgroud)

我想要的是

为了在影子根内部使用，我想将每个组件的编译 CSS …

shadow-dom reactjs webpack webpack-style-loader react-css-modules

Mik*_*keX

2020 06-20

13
推荐指数

1
解决办法

1109
查看次数

字体很棒,没有在Bootstrap中加载图标

我试图用Webpack做一个简单的Bootstrap和Font-awesome.我设法加载Bootstrap CSS但Font-awesome无法正常工作.

这就是我得到的结果:

我的代码如下.我在这做什么错了？

资源:这里有Github代码.

的package.json

{
  "name": "",
  "version": "0.0.1",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack -w"
  },
  "license": "MIT",
  "devDependencies": {
    "css-loader": "^0.21.0",
    "expose-loader": "^0.7.0",
    "file-loader": "^0.8.4",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.6",
    "webpack": "^1.12.2"
  },
  "dependencies": {
    "admin-lte": "^2.3.2",
    "bootstrap": "^3.3.5",
    "bootstrap-webpack": "0.0.5",
    "exports-loader": "^0.6.2",
    "extract-text-webpack-plugin": "^0.8.2",
    "font-awesome": "^4.4.0",
    "font-awesome-webpack": "0.0.4",
    "imports-loader": "^0.6.5",
    "jquery": "^2.1.4",
    "less": "^2.5.3",
    "less-loader": "^2.2.1"
  }
}

Run Code Online (Sandbox Code Playgroud)

入口点: …

javascript font-awesome twitter-bootstrap-3 webpack webpack-style-loader

Ari*_*que

2018 07-14

12
推荐指数

1
解决办法

9785
查看次数

Webpack Uglify CSS中的错误

我强调试图让Uglify与我的项目合作,以前我使用过Uglify并没有给出问题,但现在我觉得这与SASS有关.

ERROR in ./~/css-loader!./~/sass-loader!./app/scss/global-header.scss
    Module build failed: TypeError: Cannot read property '4' of undefined
        at reduce (/Users/contractor/centralefcom-global-components/node_modules/postcss-reduce-transforms/dist/index.js:121:23)
        at walk (/Users/contractor/centralefcom-global-components/node_modules/postcss-value-parser/lib/walk.js:7:22)
        at ValueParser.walk (/Users/contractor/centralefcom-global-components/node_modules/postcss-value-parser/lib/index.js:18:5)
        at /Users/contractor/centralefcom-global-components/node_modules/postcss-reduce-transforms/dist/index.js:131:75
        at /Users/contractor/centralefcom-global-components/node_modules/postcss/lib/container.js:92:28
        at /Users/contractor/centralefcom-global-components/node_modules/postcss/lib/container.js:73:26
...
...

Run Code Online (Sandbox Code Playgroud)

此错误重复多次,每个多个包一个.

这是我的webpack配置.

var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');

module.exports = {
  context: __dirname,
  resolve: {
    modulesDirectories: ['node_modules', 'bower_components']
  },
  entry: {
    'all': [
      './app/global-all.js',
      './app/scss/global-all.scss'
    ],
    'footer': [
      './app/global-footer.js',
      './app/scss/global-footer.scss'
    ],
    'header': [
      './app/global-header.js',
      './app/scss/global-header.scss'
    ],
    'footer.nodeps': [
      './app/global-footer-nodeps.js', …

Run Code Online (Sandbox Code Playgroud)

javascript uglifyjs webpack webpack-style-loader html-webpack-plugin

jja*_*nso

lucky-day

12
推荐指数

1
解决办法

1737
查看次数

使用Webpack导入CSS和JS文件

我有这样的目录结构:

和node_modules内:

 >node_modules
  >./bin
   >webpack.config.js
  >bootstrap
   >bootstrap.css
   >bootstrap.js

Run Code Online (Sandbox Code Playgroud)

我需要像这样生成单独的CSS和JS包:

custom-styles.css,custom-js.js,style-libs.css,js-libs.js

where style-libs和js-libsshould应该包含所有库的syles和js文件,如bootstrap和jQuery.这是我到目前为止所做的:

webpack.config.js:

const path = require('path');
const basedir = path.join(__dirname, '../../client');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const stylesPath = path.join(__dirname, '../bootstrap/dist/css');

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

module.exports = {
  watch: true,

  // Script to bundle using webpack
  entry: path.join(basedir, 'src', 'Client.js'),
  // Output directory and bundled file
  output: {
    path: path.join(basedir, 'dist'),
    filename: 'app.js'
  },
  // Configure module loaders (for JS ES6, JSX, etc.)
  module: {
    // Babel …

Run Code Online (Sandbox Code Playgroud)

reactjs webpack webpack-style-loader html-webpack-plugin

Sye*_*aqi

2017 04-07

12
推荐指数

2
解决办法

3万
查看次数

Webpack style-loader / css-loader: url() 路径解析不起作用

有一些关于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');
}

Run Code Online (Sandbox Code Playgroud)

错误：

./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 …

Run Code Online (Sandbox Code Playgroud)

javascript css webpack webpack-style-loader css-loader

Mag*_*nus

2018 09-07

12
推荐指数

3
解决办法

2万
查看次数

使用 Vue.JS 时，我们是否被迫在 CSP 中使用“unsafe-inline”？

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

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

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

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