更改 toastr.js 的颜色 - Javascript

toastr.js 是一个用于在浏览器中显示通知消息的 Javascript 库。它提供了一种简单和易于使用的方法来创建自定义的提示消息。

在本文中，我们将探讨如何通过更改 toastr.js 的样式来改变提示消息的颜色和外观。我们将使用 Sass 和 Webpack 来编译我们的 CSS 文件，这样我们就可以使用 Sass 变量来轻松地更改颜色。

安装 Toastr.js

首先，我们需要安装 toastr.js 库。你可以通过执行以下命令来安装它：

npm install toastr --save

或者，你可以从 官方网站 下载源代码文件，然后将 toastr.min.js 文件引入到你的 HTML 页面中。

创建样式文件

我们将创建一个样式文件来修改 toastr.js 的样式。为了使这个过程更容易，我们将使用 Sass 变量来定义我们想要修改的颜色。

首先，创建一个名为 toast.scss 的 Sass 文件，并添加以下内容：

@import '~toastr/toastr';

$toast-bg-color: #333;
$toast-color: #fff;

.toast {
  background-color: $toast-bg-color;
  color: $toast-color;
}

在这个文件中，我们首先导入了 toastr 库，这样我们可以使用其中的样式类和 mixin。然后，我们定义了两个 Sass 变量 $toast-bg-color 和 $toast-color，并将它们用于修改 toast 类的样式。

在这个文件中，我们只是修改了背景颜色和文字颜色。你可以根据你的需要添加其他的样式属性。

编译样式文件

为了编译这个 Sass 文件，我们需要使用 Webpack。如果你还没有安装 Webpack，你可以执行以下命令来安装它：

npm install webpack webpack-cli --save-dev

接下来，我们需要创建一个名为 webpack.config.js 的 Webpack 配置文件，并添加以下内容：

const path = require('path');

module.exports = {
  entry: './toast.scss',
  output: {
    filename: 'toast.css',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
};

在这个文件中，我们配置了 Webpack，使用入口文件 toast.scss，并将编译后的文件输出为 toast.css。我们还添加了一个 module 配置项，用于告诉 Webpack 如何处理 Sass 文件。

现在，我们可以执行以下命令来编译我们的样式文件：

npm run webpack

这个命令将执行 Webpack，根据我们的配置文件编译 Sass 文件，并输出 toast.css 文件到 dist 目录下。

引入样式文件

现在，我们可以在 HTML 页面中引入 toastr.js 库和我们编译后的 CSS 文件：

<link rel="stylesheet" href="dist/toast.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

更改颜色

现在，我们已经准备好更改 toastr.js 的颜色了。为了演示这个过程，我们将使用 toastr.success() 方法来显示成功消息。

要更改消息的颜色，我们只需要添加 toast 类到成功消息的选项中：

toastr.options = {
  "positionClass": "toast-top-right",
  "preventDuplicates": true
}

toastr.success('Success message', '', {
  'timeOut': 2000,
  'extendedTimeOut': 0,
  'toastClass': 'toast'
});

在上面的代码中，我们将 toast 类添加到了 toastr.success() 方法的第三个参数中。这将使 toastr.js 应用我们在 toast.scss 文件中定义的样式。

结论

现在，你已经知道了如何通过使用 Sass 和 Webpack 来更改 toastr.js 的颜色。我们使用 Sass 变量定义了我们想要修改的颜色，并使用 Webpack 编译了样式文件。

最后，我们将样式应用到 toastr.js 的消息中，使它们在显示时具有我们自定义的颜色和样式。