标签: webpack-style-loader

假设我有以下 2 个组件，直接需要相同的实用程序 css 文件。

组件一：

import component1Css from '/path/to/component1.scss'
import someOtherUtilityCss from './path/to/some-other-css.scss'
...
export default Component1;

组件二：

import component2Css from './path/to/component2.scss'
import someOtherUtilityCss from './path/to/some-other-css.scss'
...
export default Component2;

然后我将它们包含在我的应用程序中：

主应用程序：

import someLayoutCss from './path/to/some-layout.css';
import Component1 from './path/to/component1'
import Component2 from './path/to/component2'

...

export default App;

我希望捆绑系统知道只导入some-other-css.scss一次。

style-loader + css-loader 是否已经开箱即用？

此外，

如何处理内部 css 导入？

如果我通过 import 语句在 javascript 中导入了 cssFile1 和 cssFile2：

import cssFile1 from 'path/to/file1.scss'
import cssFile2 from 'path/to/file2.scss'

而且cssFile1和cssFile2内部都导入了cssFile3，cssFile3的内容会出现在file1.css和file2.css中吗？或者 sass-loader 会解决这个问题并且只包含 cssFile3 …

我正在尝试编译我的所有.scss文件，但 webpack 似乎没有这样做，即使我已经style-loader & sass-loader在我的 webpack 配置文件中声明。

我不明白为什么.scss文件不能编译？我遵循了以下博客的指南：http : //www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass.html

装载机：

loaders: [
            // Working loaders...
            {test: /\.json$/, loaders: ["json"]},
            {test: /\.(ico|gif|png|jpg|jpeg|svg|webp)$/, loaders: ["file?context=static&name=/[path][name].[ext]"], exclude: /node_modules/},
            {test: /\.js$/, loaders: ["babel?presets[]=es2015&presets[]=stage-0&presets[]=react"], exclude: /node_modules/},
            
            // Non working loaders...
            // ALSO TRIED THIS -> { test: /\.scss$/,loader: ExtractTextPlugin.extract( "style", 'css!sass')}
            { test: /\.css$/, loader: ExtractTextPlugin.extract(
                "style-loader",
                "sass-loader?sourceMap",
                {
                    publicPath: "../dist"
                }
            )},

],

style.css永远不会在任何地方生成。

插件：

plugins: [
    new ExtractTextPlugin("style.css", {
       disable: false,
       allChunks: true
    }), …

我已经使用 CSS 模块设置了 webpack 2，并且可以正常工作。但是，当我通过浏览器调试器调试CSS时，所有路径都是这样的：“blob：http://localhost:3000/2b5f9ab7-7972-4c8a-bdbd-96cd9e74b6f9 ”

这使我无法识别 CSS 模块。有什么方法可以让 webpack 写出模块名称吗？

提前致谢！

我正在尝试将自定义 SemanticUI 构建集成到 webpack vue.js 模板中。我没有遇到 jquery 和 SemanticUI 模块集成的问题，但是我没有让 less 文件工作。

我创建与应用程序vue-cli和webpack模板，我安装less-loader并style-loader通过npm相应。

在添加 SemanticUI less 文件之前，我想看看我的构建管道是否正常工作，所以我创建了以下文件夹结构和测试文件：

构建/webpack.base.conf.js

resolve: {
  // ...
  alias: {
    // ...
    'semantic-ui': path.resolve(__dirname, '../semantic-ui')
  }
  // ...
}
// ...
module: {
  // ...
  loaders: {
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader"
  }
  // ...
}

语义ui/semantic.less

& { @import 'test.less'; }

语义用户界面/test.less

@variable: 2px;

源代码/main.js

// ...
require('semantic-ui/semantic.less')
// ...

但是当我运行时，我总是以以下错误告终 npm run dev

ERROR in …

例如，如果我们有一个以以下内容命名的供应商scss 文件vendor.scss：

$color: green;

h1 {
  background-color: $color;
}

我们如何编写规则来实现以下结果？（或类似）

let vendor = true; // this will be configured outside

if (vendor) {
  let style = require('style-loader/useable!css-loader!./vendor.scss');
  style.use(); //loads just if I call `use`, otherwise not
}

require('my-other-file.scss'); // loads normally, without `use`.

因为vendor.scss是供应商 scss/css 我们不能或不应将其重命名为，例如，vendor.useable.scss. 并且出于维护目的，我们不希望创建一个my-vendor-wrapper.scss可以将其包裹在@import内部的新工具。

在 webpack 中，现在，我有这个规则：

const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  // test: /\.(scss|sass|css)$/i,
  test: /^(?!.*style-loader\/useable!).*\.(sass|scss|css)$/i,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', …

我正在使用 Express 构建一个 React 应用程序，我尝试添加一个样式加载器/css 加载器以启用导入 css，但是当我启动我的服务器时，我收到以下错误：

M:\MainFiles\MyStuff\Code\react\FlexBoardToolBox>npm run start:dev

> flex_board@1.0.0 start:dev M:\MainFiles\MyStuff\Code\react\FlexBoardToolBox
> cross-env NODE_ENV=development && npm run build:dev && nodemon --exec babel-node -- src/server/server.js


> flex_board@1.0.0 build:dev M:\MainFiles\MyStuff\Code\react\FlexBoardToolBox
> webpack -d

Hash: 1b4953ee761d210e2488
Version: webpack 2.2.1
Time: 2567ms
    Asset     Size  Chunks                    Chunk Names
bundle.js  2.54 MB       0  [emitted]  [big]  js
   [6] ./~/react/react.js 55 bytes {0} [built]
  [23] ./~/react/lib/React.js 2.71 kB {0} [built]
  [24] ./~/react-router-dom/es/index.js 2.21 kB {0} [built]
  [89] ./~/react-router-dom/es/Link.js 4.67 kB {0} [built]
  [94] ./~/react-dom/index.js 58 …

我有一个简单的 scss 文件

$fa-font-path: "~font-awesome/fonts";
$bootstrap-sass-asset-helper: false !default;
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
$icon-font-name: "glyphicons-halflings-regular" !default;
$icon-font-svg-id: "glyphicons_halflingsregular" !default;
@import "~bootstrap-sass/assets/stylesheets/bootstrap";
@import '~font-awesome/scss/font-awesome';

*, *:before, *:after {
  box-sizing: border-box;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  background-color: $bg;
  margin-bottom: 60px;
}

我的 webpack 加载器看起来像这样：

  {
    test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
    use: {
      loader: 'url-loader',
      options: {
        limit: 10000,
        mimetype: 'application/font-woff'
      }
    }
  },
  {
    test: /\.(ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
    use: 'file-loader'
  },
  {
    test: /\.scss$/,
    include: [
      path.resolve(process.cwd(), "src/client/assets/styles"),
    ],
    use: ExtractTextPlugin.extract({
      fallback: "style-loader",
      use: [ …

我在 angular8 工作并面临一个问题，

为了动态加载我的样式，我使用了波纹管代码并且它运行良好，但是当我将包更新"@angular-deficit/build-angular": "^0. 800.0"为 时"@angular-deficit/build-angular": "^0. 803.21"，它停止工作。该应用程序运行良好，终端和浏览器控制台中没有错误，但应用程序上未实现样式。

declare function require(name: string): any;
 ngOnInit() {
    require('style-loader!./file-path');
}

包.json

{
"name": "latest-frontend-theme",
"version": "0.0.0",
"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
},
"private": true,
"dependencies": {
    "@agm/core": "^1.1.0",
    "@angular/animations": "^8.2.14",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@ngx-loading-bar/core": "^4.2.0",
    "@ngx-loading-bar/router": …

我试图找出构建 React 项目时 CSS 文件所在的位置。我正在使用 webpack，如果我使用普通 CSS，我可以为整个项目中使用的所有样式创建一个 CSS 文件。当我使用样式组件在 js 中使用 CSS 时，我没有得到外部 CSS 文件。

webpack.config.js

var path    = require('path');
var hwp     = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');


module.exports = {
    entry: path.join(__dirname, '/src/index.js'),
    output: {
        filename: 'index.js',
        path: path.join(__dirname, './dist'),
        publicPath : '/'
    },
    module:{
        rules:[{
            exclude: /node_modules/,
            test: /\.js$/,
            loader: 'babel-loader'
    },
    {
        test: /\.css$/i,
        use: [
            {
            loader : MiniCssExtractPlugin.loader,
            options : {
                publicPath: '/public/path/to/',
            },
        }, 
        'css-loader'
    ]
      }
    ]
    },
    devServer: {
        historyApiFallback: true,
      }, …

问题

在使用 Storybook 时，我正在运行npm run storybook并收到以下错误。

ModuleBuildError: Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function

背景/上下文

我的目标是让 Storybook 能够使用sass.

设置很简单：我有scss由组件文件导入的文件。

在寻找实现此目的的方法时，我遇到了一个可以这样做的插件，请参阅此. 本质上，您可以运行npm i --save-dev @storybook/preset-scss style-loader css-loader sass-loader.

这样做时，我遇到了第一个错误。这是同样的错误，但对于sass-loader. 这个Stack Overflow 线程帮助我修复了这个错误。

所以，我想总而言之，我已经尝试过：

• 跟随文档（上面链接）
• 跟随堆栈溢出线程（上面链接）

相关的开发依赖

"@storybook/preset-scss": "^1.0.3",
"css-loader": "^6.2.0",
"sass-loader": "^10.1.1",
"style-loader": "^3.2.1"

提前致谢！