Question

我在AngularJS中看到过这个具有滑块范围功能的库： Ion.RangeSlider

并且有一个人在Angular 2中制作一个封装器： ng2-ion-range-slider

我使用webpack而不是Angular-Cli。

我试图按照他的安装说明进行操作但没有样式。

任何人都可以帮我找到在webpack中放置样式路径的位置吗？

Answer 1

我尝试了一些尝试失败后才能做到。

首先，我将Angular 5与Webpack和Angular Material一起使用。

1）将滑块库及其包装器添加到package.json文件。

"ion-rangeslider": "2.2.0"
"ng2-ion-range-slider": "~1.0.3"

2）我已将滑块样式添加到项目中的theme.scss文件中，如下所示：

@import '~@angular/material/_theming.scss';
@import '~ion-rangeslider/css/ion.rangeSlider.css';
@import '~ion-rangeslider/css/ion.rangeSlider.skinModern.css';
// @import '~ion-rangeslider/css/ion.rangeSlider.skinFlat.css';

添加所需的样式取决于您选择的皮肤。

3）无需在javascript中导入webpack文件，我的意思是这两个文件：

jquery/dist/jquery.min.js
ion-rangeslider/js/ion.rangeSlider.js

4）在IonRangeSliderModule。

中导入AppModule

import { IonRangeSliderModule } from 'ng2-ion-range-slider';

现在，您可以像以下一样使用它：

<ion-range-slider type="double" [min]="min" [max]="max" [step]="step" [from]="value1" 
                  [to]="value2" (onFinish)="sliderChange($event)">
</ion-range-slider>

更新

对于那些不使用Angular Material

的人

您可以在css配置文件中导入scss和webpack文件。

1-）安装sass-loader库：

"sass-loader": "^6.0.3",
"sass-resources-loader": "^1.3.3",

2-）在项目中使用任何名称（例如scss）创建新的./src/index.scss文件，并将要导入的所有css和scss添加到此文件。

3-）在webpack.common.js文件内，将其添加到规则中或如果存在则更改它：

/**
 * To string and sass loader support for *.scss files (from Angular components)
 * Returns compiled css content as string
 *
 */
{
  test: /\.scss$/,
  use: ['to-string-loader', 'css-loader', 'sass-loader',
    {
      loader: 'sass-resources-loader',
      options: {
        // Provide path to the file with resources
        resources: `./src/index.scss`
      },
    },
  ],
  exclude: [helpers.root('src', 'styles')]
},

Angular 2滑块范围 - 添加Ion.RangeSlider库

1 个答案: