Webpack 4构建了角7，在尝试访问node_modules时给sass加载程序带来了问题。

Question

我正在进行从v4到v7的升级。由于angular.json的.ange-cli.json以及它们的结构，出现了一些严重的变化。然后又升级版的角和webpack有其影响。

在角4，它与自定义webpack建设者工作良好，但升级到v7有其复杂性。还值得一提的是，在我所使用的node_modules上不使用任何scss的情况下尝试构建也确实会像预期的那样工作。所以我看到，这个问题与webpack的道路有关。

我们现在面临的主要问题是，sass加载程序正在比较@import 'path/to/file'，因为它没有找到它，然后导致构建失败。

执行ng serve和ng build确实没有任何问题，但是使用自定义webpack进行构建它确实失败了，因为它找不到路径。

我得到的错误是：

模块构建中的

错误失败(来自./node_node/sass-加载程序/lib/loader.js)：@import‘./ style /src/abstracts/_Miins.scss“；^ File导入未找到或无法读取：’./style/src/abstracts/_MIXINs.scss”；父样式表: stdin /Path/ to /project (第4行，第1列)

我也尝试过从我的本地机器的包执行npm link，但是没有任何进展。

这些包是我在我的项目中导入的组件，它只是带有组件及其scss的包。

webpack配置文件如下所示：

* webpack.config.app.prod.js *

var webpackMerge = require('webpack-merge');
var prod = require('./webpack.config.prod');
var AotPlugin = require('@ngtools/webpack').AngularCompilerPlugin;

module.exports = webpackMerge.strategy({
    plugins: 'prepend'
})(prod.config, {
    entry: './src/main-wp.editor.aot.ts',
    output: {
        filename: 'editor.bundle.js',
        chunkFilename: '[id].chunk.js',
        library: '_' + 'child',
        libraryTarget: 'jsonp'
    },
    plugins: [
        new AotPlugin({
            tsConfigPath: 'tsconfig.aot.json',
            entryModule: './src/app/modules/app.module#EditorModule',
            debug: true
        })
    ]
});

* webpack.config.prod.js *

var path = require('path');

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.config.common');
var UglifyJsPlugin = require("uglifyjs-3-webpack-plugin");

module.exports = {
    config: webpackMerge(commonConfig, {
        output: {
            path: path.resolve(__dirname, 'dist'),
            publicPath: '/',
            filename: 'bundle.js',
            chunkFilename: '[id].[hash].chunk.js'
        },
        module: {
            rules: [
                {
                    test: /\.ts$/,
                    use: ['@ngtools/webpack']
                },

                {
                    test: /\.js$/,
                    loader: '@angular-devkit/build-optimizer/webpack-loader',
                    options: {
                        sourceMap: false
                    }
                }
            ]
        },
        plugins: [
            new UglifyJsPlugin({
                uglifyOptions: {
                    warnings: false,
                    ie8: false,
                    output: {
                        comments: false
                    }
                }
            })
        ]
    }),
    buildPath: function root(args) {
        var _root = path.resolve(__dirname);
        args = Array.prototype.slice.call(arguments, 0);
        return path.join.apply(path, [_root].concat(args));
    }
};

* webpack.config.common.js *

var HtmlWebpackPlugin = require('html-webpack-plugin');
var glob = require("glob");
var path = require('path');

module.exports = {
    entry: './src/main.ts',
    resolve: {
        extensions: ['.js', '.ts']
    },
    module: {
        rules: [
            {
                test: /\.html$/,
                loaders: ['html-loader']
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "to-string-loader"
                    },
                    {
                        loader: "css-loader", // translates CSS into CommonJS
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader", // compiles Sass to CSS
                        options: {
                            sourceMap: true,
                            includePaths: glob.sync(
                                path.join(__dirname, '**/node_modules/@mypackage/styles/src/abstracts')
                              ).map((dir) => path.dirname(dir)),
                            // includePaths: [path.resolve("node_modules/@mypackage")],
                            // includePaths: [
                            //     path.resolve('../node_modules')
                            // ]
                        }
                    }
                ]
            }

        ],
        exprContextCritical: false
    },
    plugins: [

        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ]
};

我用过的版本。@角/编译器-cli“："7.2.15”

"uglifyjs-3-webpack-plugin"："1.2.4“

@角-建筑商/自定义-webpack“："7.4.3”

@ngtools/webpack："7.0.7"，

“@type/node”："8.9.5“

节点-sass："4.5.3“

"sass-loader"："7.3.1“

“到-字符串-加载程序”："1.1.5“

“ts-节点”："7.0.1“

打字本："3.2.4“

webpack："4.29.0“

webpack-克莱尔："3.3.10“

webpack-合并："4.2.2“

和带有npm 5.5.1的节点8.9.5

谢谢!

Answer 1

我也遇到了同样的问题，并通过sass-loader为scss ( webpack.config.common.js )应用了以下规则解决了这个问题：

            {
                test: /\.component\.(css|sass|scss)$/,
                use: [
                    'to-string-loader',                  
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            sassOptions: {
                                importer: url => {
                                    if (url.startsWith('@angular/')) {
                                        return {
                                            file: path.resolve(`./node_modules/${url}`),
                                        };
                                    }
                                    return null;
                                },
                            },
                        }
                    }
                ]
            }

如果需要使用node_module中的另一个库，则可以添加另一个else if语句：

例如，假设我在node_modules中有一个自定义库node_modules，我希望访问：node_modules/my-library/style.scss，所以我必须添加以下else if语句：

       {
            test: /\.component\.(css|sass|scss)$/,
            use: [
                'to-string-loader',                  
                'css-loader',
                {
                    loader: 'sass-loader',
                    options: {
                        sassOptions: {
                            importer: url => {
                                if (url.startsWith('@angular/')) {
                                    return {
                                        file: path.resolve(`./node_modules/${url}`),
                                };
                                else if (url.startsWith('my-library/')) {
                                        return {
                                            file: path.resolve(`./node_modules/${url}`),
                                        };
                                    }
                                return null;
                            },
                        },
                    }
                }
            ]
        }

请注意，这是我的项目结构：

node_modules
dist
config
  - webpack.common.js
  - webpack.dev.js
  - webpack.prod.js
  - webpack.test.js
src
  - app
    - app-routing.module.ts
    - app.component.html
    - app.component.scss
    - app.component.ts
    - app.module.ts
    - index.ts
  - index.html
  - main.browser.ts
  - polyfills.browser.ts
angular.json
package.json
postcss.config.js
tsconfig.json
tsconfig.webpack.json
webpack.config.js

如果这对你有用的话请告诉我。