带有 sass-loader、MiniCssExtractPlugin 和 uikit 的 Webpack4答案

【问题标题】：Webpack4 with sass-loader, MiniCssExtractPlugin and uikit带有 sass-loader、MiniCssExtractPlugin 和 uikit 的 Webpack4
【发布时间】：2018-12-20 13:32:27
【问题描述】：

我正在尝试使用

设置 uitkit 模板

webpack 4
sass 加载器
MiniCssExtractPlugin
uikit

我想要实现的是构建自动将 sass 转换为 css，并将生成的 css 注入 src/index.html。

webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      {
    test: /\.scss$/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: "css-loader",
        options: {
          modules: true,
          sourceMap: true,
          importLoader: 4
        }
      },
      "sass-loader"
    ]}
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

index.js

import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';
import style from "uikit/src/scss/uikit.scss"
UIkit.use(Icons);

不幸的是，构建失败了

ERROR in ./node_modules/uikit/src/scss/uikit.scss (./node_modules/css-loader??ref--6-1!./node_modules/sass-loader/lib/loader.js!./node_modules/uikit/src/scss/uikit.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
$inverse-base-color: $inverse-global-color !default;
Undefined variable: "$inverse-global-color".
in new_proj/node_modules/uikit/src/scss/components/base.scss (line 607, column 49)

如果有人能解释我做错了什么以及为什么 sass loader 找不到变量 $inverse-global-color，我将不胜感激。

【问题讨论】：

标签： sass uikit webpack-4 sass-loader mini-css-extract-plugin

【解决方案1】：

我找到了答案。它的工作原理是这样的：

index.js

...
import style from "./main.scss"
...

main.scss

// 1. Your custom variables and variable overwrites.
$global-link-color: #DA7D02;

// 2. Import default variables and available mixins.
@import "uikit/src/scss/variables-theme.scss";
@import "uikit/src/scss/mixins-theme.scss";

// 3. Your custom mixin overwrites.
@mixin hook-card() { color: #000; }

// 4. Import UIkit.
@import "uikit/src/scss/uikit-theme.scss";

【讨论】：