auth-web/build/utils.js

"use strict";
const path = require("path");
const config = require("../config");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const packageConfig = require("../package.json");
const chalk = require("chalk");
const defaultTheme = "default"; // 默认主题

exports.assetsPath = function(_path) {
    const assetsSubDirectory =
        process.env.NODE_ENV === "production" ? config.build.assetsSubDirectory : config.dev.assetsSubDirectory;

    return path.posix.join(assetsSubDirectory, _path);
};

exports.cssLoaders = function(options) {
    options = options || {};

    const cssLoader = {
        loader: "css-loader",
        options: {
            sourceMap: options.sourceMap
        }
    };

    const postcssLoader = {
        loader: "postcss-loader",
        options: {
            sourceMap: options.sourceMap
        }
    };

    // generate loader string to be used with extract text plugin
    function generateLoaders(loader, loaderOptions) {
        const loaders = [];

        // Extract CSS when that option is specified
        // (which is the case during production build)
        if (options.extract) {
            // loaders.push(MiniCssExtractPlugin.loader);
            // Tips: repaired css files contain image's url address, TangDM.2019.04.29
            loaders.push({
                loader: MiniCssExtractPlugin.loader,
                options: {
                    publicPath: "../../"
                }
            });
        } else {
            loaders.push("vue-style-loader");
        }

        loaders.push(cssLoader);

        if (options.usePostCSS) {
            loaders.push(postcssLoader);
        }

        if (loader) {
            // 修改这一块，当使用sass-resources时也需要引入'sass-loader'
            if (loader === "sass-resources") {
                loaders.push({
                    loader: "sass-loader"
                });
            }
            loaders.push({
                loader: loader + "-loader",
                options: Object.assign({}, loaderOptions, {
                    sourceMap: options.sourceMap
                })
            });
        }

        return loaders;
    }

    function resolveResource() {
        // config arr props
        let _arr = [];

        // default other variables
        let otherVariables = ["common.scss"];

        // construct skin theme styles
        let name = process.env.NODE_ENV === "theme" ? process.argv[2] : defaultTheme;

        otherVariables.push("variable-theme-" + name + ".scss");

        // other variable scss files
        otherVariables.forEach(item => {
            _arr.push(path.resolve(__dirname, "../src/assets/style/" + item));
        });

        console.table(_arr);

        return _arr;
    }

    // https://vue-loader.vuejs.org/en/configurations/extract-css.html
    return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateLoaders("less"),
        sass: generateLoaders("sass", { indentedSyntax: true }),
        scss: generateLoaders("sass"),
        // sass: generateLoaders("sass-resources", {
        //     resources: resolveResource()
        // }),
        // scss: generateLoaders("sass-resources", {
        //     resources: resolveResource()
        // }),
        stylus: generateLoaders("stylus"),
        styl: generateLoaders("stylus")
    };
};

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function(options) {
    const output = [];
    const loaders = exports.cssLoaders(options);

    for (const extension in loaders) {
        const loader = loaders[extension];
        output.push({
            test: new RegExp("\\." + extension + "$"),
            use: loader
        });
    }

    return output;
};

exports.createNotifierCallback = () => {
    const notifier = require("node-notifier");

    return (severity, errors) => {
        if (severity !== "error") return;

        const error = errors[0];
        const filename = error.file && error.file.split("!").pop();

        notifier.notify({
            title: packageConfig.name,
            message: severity + ": " + error.name,
            subtitle: filename || "",
            icon: path.join(__dirname, "logo.png")
        });
    };
};