Проблема при попытке создать файл веб-пакета - ошибка на этапе загрузки sass - PullRequest
0 голосов
/ 17 апреля 2020

Я получаю следующую ошибку:

 ERROR in ./ClientApp/app/navmenu/navmenu.scss
    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    Error: ENOENT: no such file or directory, scandir 'C:\Users\simon\OneDrive\Documents\1.0 - AURELIA\1.3 - JobsLedgerSPA - ASPNET CORE 2.2 ODATA\Jobsledger.API\node_modules\node-sass\vendor'
        at Object.readdirSync (fs.js:872:3)
        at Object.getInstalledBinaries (C:\Users\simon\OneDrive\Documents\1.0 - AURELIA\1.3 - JobsLedgerSPA - ASPNET CORE 2.2 ODATA\Jobsledger.API\node_modules\node-sass\lib\extensions.js:132:13)
        at foundBinariesList (C:\Users\simon\OneDrive\Documents\1.0 - AURELIA\1.3 - JobsLedgerSPA - ASPNET CORE 2.2 ODATA\Jobsledger.API\node_modules\node-sass\lib\errors.js:20:15)
        at foundBinaries (C:\Users\simon\OneDrive\Documents\1.0 - AURELIA\1.3 - JobsLedgerSPA - ASPNET CORE 2.2 ODATA\Jobsledger.API\node_modules\node-sass\lib\errors.js:15:5)
        at Object.module.exports.missingBinary (C:\Users\simon\OneDrive\Documents\1.0 - AURELIA\1.3 - JobsLedgerSPA - ASPNET CORE 2.2 ODATA\Jobsledger.API\node_modules\node-sass\lib\errors.js:45:5)
        at module.exports (C:\Users\simon\OneDrive\Documents\1.0 - AURELIA\1.3 - JobsLedgerSPA - ASPNET CORE 2.2 ODATA\Jobsledger.API\node_modules\node-sass\lib\binding.js:15:30)
        at Object.<anonymous> (C:\Users\simon\OneDrive\Documents\1.0 - AURELIA\1.3 - JobsLedgerSPA - ASPNET CORE 2.2 ODATA\Jobsledger.API\node_modules\node-sass\lib\index.js:14:35)
        at Module._compile (C:\Users\simon\OneDrive\Documents\1.0 - AURELIA\1.3 - JobsLedgerSPA - ASPNET CORE 2.2 ODATA\Jobsledger.API\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
        at Module.load (internal/modules/cjs/loader.js:1000:32)
        at Function.Module._load (internal/modules/cjs/loader.js:899:14)
        at Module.require (internal/modules/cjs/loader.js:1042:19)
        at require (C:\Users\simon\OneDrive\Documents\1.0 - AURELIA\1.3 - JobsLedgerSPA - ASPNET CORE 2.2 ODATA\Jobsledger.API\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
        at getDefaultSassImpl (C:\Users\simon\OneDrive\Documents\1.0 - AURELIA\1.3 - JobsLedgerSPA - ASPNET CORE 2.2 ODATA\Jobsledger.API\node_modules\sass-loader\dist\index.js:198:10)
        at Object.loader (C:\Users\simon\OneDrive\Documents\1.0 - AURELIA\1.3 - JobsLedgerSPA - ASPNET CORE 2.2 ODATA\Jobsledger.API\node_modules\sass-loader\dist\index.js:80:29)
     @ ./ClientApp/app/navmenu/navmenu.html
     @ ./ClientApp/boot.ts
     @ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
     @ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry es6-promise/auto aurelia-bootstrapper

Я получаю это при выполнении следующей команды:

npm run webpack:watch

и мой файл веб-пакета выглядит следующим образом:

const path = require("path");
const webpack = require("webpack");
const { AureliaPlugin, ModuleDependenciesPlugin, GlobDependenciesPlugin } = require("aurelia-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

const bundleOutputDir = "./wwwroot/dist";

module.exports = (env, argv) => {
    if ((!argv || !argv.mode) && process.env.ASPNETCORE_ENVIRONMENT === "Development") {
        argv = { mode: "development" };
    }
    console.log("mode =", argv.mode);
    const isDevBuild = argv.mode !== "production";
    const cssLoaders = ["css-loader", "postcss-loader"];
    const scssLoaders = [...cssLoaders, "sass-loader"];

    return [{
        target: "web",
        mode: isDevBuild ? "development" : "production",
        entry: { "app": ["es6-promise/auto", "aurelia-bootstrapper"] },
        resolve: {
            extensions: [".ts", ".js"],
            modules: ["ClientApp", "node_modules"]
        },
        output: {
            path: path.resolve(bundleOutputDir),
            // Asp.Net JavaScriptServices does not tolerate "/" in public path, see https://github.com/aspnet/JavaScriptServices/issues/1495
            publicPath: "dist/",
            filename: "[name].[hash].js",
            chunkFilename: "[name].[chunkhash].js",
            pathinfo: false
        },
        module: {
            rules: [
                { test: /\.(woff|woff2|png|eot|ttf|svg)(\?|$)/, use: { loader: "url-loader", options: { limit: 1, publicPath: "./" } } },
                { test: /\.ts$/i, include: [/ClientApp/], loader: "ts-loader" },
                { test: /\.html$/i, use: "html-loader" },
                { test: /\.css$/i, /*include: [/node_modules/],*/ issuer: /\.html$/i, use: cssLoaders },
                { test: /\.css$/i, /*include: [/node_modules/],*/ exclude: [/bootstrap.css$/, /font-awesome.css$/], issuer: [{ not: [{ test: /\.html$/i }] }], use: ["style-loader", ...cssLoaders] },
                { test: /\.css$/, include: [/bootstrap.css$/, /font-awesome.css$/], use: [{ loader: MiniCssExtractPlugin.loader }, ...cssLoaders] },
                { test: /\.scss$/i, issuer: /(\.html|empty-entry\.js)$/i, use: scssLoaders },
                { test: /\.scss$/i, issuer: /\.ts$/i, use: ["style-loader", ...scssLoaders] }
            ]
        },
        optimization: {
            splitChunks: {
                chunks: "all",
                // comment the following to avoid creatin a separate bundle for each npm module
                maxInitialRequests: Infinity,
                minSize: 0,
                cacheGroups: {
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        name(module) {
                            // get the name. E.g. node_modules/packageName/not/this/part.js
                            // or node_modules/packageName
                            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

                            // npm package names are URL-safe, but some servers don't like @ symbols
                            return `npm.${packageName.replace('@', '')}`;
                        }
                    }
                }
            }
        },
        devtool: isDevBuild ? "source-map" : false,
        performance: {
            hints: false
        },
        plugins: [
            new CleanWebpackPlugin(),
            new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
            new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" }),
            new HtmlWebpackPlugin({ template: 'index.ejs', filename: "../../wwwroot/index.html", inject: false, metadata: {}, alwaysWriteToDisk: true }),
            new AureliaPlugin({ aureliaApp: "boot" }),
            new GlobDependenciesPlugin({ "boot": ["ClientApp/**/*.{ts,html}"] }),
            new ModuleDependenciesPlugin({}),
            new MiniCssExtractPlugin({
                filename: "[name].[hash].css",
                chunkFilename: "[name].[chunkhash].css"
            })
        ],
        devServer: {
            contentBase: "wwwroot/",
            compress: true,
            writeToDisk: true,
            hot: false
        }
    }];
};

Я посмотрел это, и ответы, похоже, относятся к конкретным c типам SPA, таким как REACT и VUE et c.

Однако я думаю, что это связано с sass и sass loader. Я запускаю следующие пакеты:

+-- @fortawesome/fontawesome-svg-core@1.2.28
+-- @fortawesome/free-brands-svg-icons@5.13.0
+-- @fortawesome/free-regular-svg-icons@5.13.0
+-- @fortawesome/free-solid-svg-icons@5.13.0
+-- au-table@0.1.14
+-- aurelia-animator-css@1.0.4
+-- aurelia-api@3.2.1
+-- aurelia-binding@2.5.2
+-- aurelia-bootstrap@0.1.20
+-- aurelia-bootstrapper@2.3.3
+-- aurelia-dialog@2.0.0
+-- aurelia-event-aggregator@1.0.3
+-- aurelia-fetch-client@1.8.2
+-- aurelia-fontawesome@0.2.2
+-- aurelia-http-client@1.3.1
+-- aurelia-mask@2.0.1
+-- aurelia-pal@1.8.2
+-- aurelia-router@1.7.1
+-- aurelia-slickgrid@2.17.9
+-- aurelia-templating@1.10.3
+-- aurelia-validation@1.6.0
+-- aurelia-webpack-plugin@4.0.0
+-- awesome-typescript-loader@5.2.1
+-- bootstrap@4.4.1
+-- clean-webpack-plugin@2.0.2
+-- css-loader@2.1.1
+-- es6-promise@4.2.8
+-- fetch@1.1.0
+-- file-loader@3.0.1
+-- font-awesome@4.7.0
+-- html-loader@0.5.5
+-- html-webpack-plugin@3.2.0
+-- isomorphic-fetch@2.2.1
+-- jquery@3.5.0
+-- mini-css-extract-plugin@0.6.0
+-- node-sass@4.13.1
+-- optimize-css-assets-webpack-plugin@5.0.3
+-- popper.js@1.16.1
+-- postcss-loader@3.0.0
+-- sass-loader@7.3.1
+-- style-loader@0.23.1
+-- tether@1.4.7
+-- ts-loader@6.2.2
+-- tslint@5.20.1
+-- typescript@3.8.3
+-- url-loader@1.1.2
+-- velocity-animate@2.0.6
+-- webpack@4.42.1
`-- webpack-cli@3.3.11

Как видите, на данном этапе я не запускаю sass-loader версии 8 ... Я не уверен, почему это происходит.

Может кто-нибудь направить меня в правильном направлении ..

С уважением

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...