小编hom*_*ing的帖子

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

我的应用程序中有一些数值输入

<td class="p-0 d-xl-table-cell d-none">
    <ul class="p-0 m-0">
        <li *ngFor='let item of product.items' class="def-number-input number-input d-flex justify-content-center">
            <input type="number" [(ngModel)]="item.quantity" (change)="this.updateCart(item)" style="height: 45px; line-height: 45px" min="0"> 
        </li>
     </ul>
</td>

我已经设法消除了输入中默认出现的箭头，以修改计数器的值，使用以下CSS

input {
  text-align: center;  
  border: 1px solid #6C757D;
} 

.number-input input[type="number"] {
  -webkit-appearance: textfield !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  }

  .number-input input[type=number]::-webkit-inner-spin-button,
  .number-input input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
  }

  .number-input {
  margin-bottom: 20px;
  padding-top: 20px !important;
  }

我的疑问是，现在我想合并越来越多的按钮来修改输入的值，但我找到的所有示例都将它们放在输入之外，例如横向按钮。有没有办法让按钮位于输入内部？附件是所需结果的网站图像。提前致谢

我只使用 React 编程很短时间，我不知道是否有更有效的方法来执行此任务。我有一系列与某些 svg 文件相对应的文件。一个例子如下。

export default function CheckIcon(props) {
  return (

    <Icon {...props}>
        options={ CheckIcon }
        />
  );
}

CheckIcon.displayName = 'CheckIcon';

然后我将它们导入到一个名为 Icon.js 的组件中，在其中为每种情况进行切换并返回相应的组件。

import React from 'react';
import CloseIcon from './icons/CloseIcon';
import CheckIcon from './icons/CheckIcon';
import SumIcon from './icons/SumIcon';
import SubtractIcon from './icons/SubtractIcon';
import MultiplyIcon from './icons/MultiplyIcon';
import DivideIcon from './icons/DivideIcon';

export default function Icon({ type, ...props }) {
  const getIcon = () => {
    switch (type) {
      case 'close':
        return <CloseIcon {...props} />;
      case 'check':
        return …

我的角度应用程序中有以下 html

                <div class=\'order-list\'>\n                    <div *ngFor="let order of orders">\n                        <div class="row ciev-row header-row d-none d-lg-flex bg-white" [ngClass]="{\'last\': i === orders.length - 1}" (click)="toggle(order)">\n                        <div class="col-sm-3 my-auto">{{order.date}}</div>\n                        <div class="col-sm-3 my-auto">Livr\xc3\xa9e</div>\n                        <div class="col-sm-3 my-auto">{{order.order_number}}</div>\n                        <div class="col-sm-2 my-auto"><span class=\'price\' [innerHTML]=\'order.overallAmount | currencyFormat\'></span></div>\n                        <div class="col-sm-1 my-auto p-0">\n                            <i class="fas fa-plus toggle-icon" *ngIf="toggled !== order.functional_id"></i>\n                            <i class="fas fa-minus toggle-icon" *ngIf="toggled === order.functional_id"></i>\n                        </div>\n                        <div class=\'row slider\' [ngClass]="{\'expanded\': toggled === order.functional_id}">\n                            <div class=\'row ciev-row last extra-data\'>\n                                <div class=\'col-sm-3 my-auto\'>Produits</div>\n                                <div class=\'col-sm-3 my-auto\'>Prix HT</div>\n                                <div class=\'col-sm-3 …