带有 sass-loader、MiniCssExtractPlugin 和 uikit 的 Webpack4

Posted 2023-02-22

【中文标题】带有 sass-loader、MiniCssExtractPlugin 和 uikit 的 Webpack4

【英文标题】：Webpack4 with sass-loader, MiniCssExtractPlugin and uikit

【发布时间】：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，我将不胜感激。

【参考方案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";