使用webpack配置ASP.NET MVC项目以构建进程 .

我有两个包含变量和mixin的实用程序文件，用于项目中的所有其他scss文件 . 该项目被组织成组件，每个组件都包含在其自己的文件夹中，并带有hbs，js和scss文件 . 我目前只有5个组件，每个组件都使用util文件中的变量 .

为了使每个组件能够使用两个util文件中的变量和mixin，我已经实现了sass-resources-loader并且正确地遵循了配置（据我所知） .

问题是只有一个组件scss文件似乎成功解决了mixins，其余的无法找到它们 .

我的完整webpack配置如下：

module.exports = {
entry: entryObject,
module: {
    loaders: [
        {
            loader: "babel-loader",
            exclude: /node_modules/,
            query: {
                presets: ["es2015", "stage-1"]
            }
        },
        { test: /\.hbs/, loader: "handlebars-template-loader" },
        {
            test: /\.(s*)css$/,
            loader: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                    {
                        loader: 'sass-resources-loader',
                        options: {
                            resources: [
                                path.resolve(__dirname, "Styles/Common/_mixins.scss"),
                                path.resolve(__dirname, "Styles/Common/_variables.scss")
                            ]
                        }
                    }
                ]
            })
        },
        { test: /\.(png|jpg)$/, loader: 'url-loader' },
        { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000000&mimetype=application/font-woff", },
        { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader", options: { outputPath: 'fonts/' } }
    ]
},
output: {
    path: path.join(__dirname, "/Content/"),
    filename: "[name]"
},
plugins: [
    // Global variables exposed to all modules
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        Nitec: path.join(__dirname, "node_modules/nitec.es.core/src/Nitec/NitecCore"),
        Handlebars: 'handlebars/runtime'
    }),
    new ExtractTextPlugin({ filename: 'Styles/site.bundle.css' })
],
resolve: {
    modules: [__dirname, 'node_modules'],
    alias: {
        Components: 'Components',
        Styles: 'Styles',
        HandlebarsExtensions: 'Scripts/Shared/HandlebarsExtensions',
        PageSetup: 'Scripts/Shared/DependencyInjector',
        Fonts: 'Fonts'
    },
    extensions: ['*', '.js', '.jsx']
},
devtool: "cheap-module-eval-source-map",    // Source map generation

};

我从构建控制台获得的错误是：

ERROR in ./node_modules/css-loader!./node_modules/postcss-
loader/lib!./node_modules/sass-loader/lib/loader.js?        
outputStyle=expanded!./node_modules/sass-resources-loader/lib/loader.js?
{"resources":
["C://VSTS//SMSWorldwide//SMSProductCatalogue//SMSProductCatalogue//Styles//Common//_mixins.scss","C://VSTS//SMS Worldwide//SMSProductCatalogue//SMSProductCatalogue//Styles//Common//_variables.scss"]}!./Components/SystemManagement/UserRole/AddUserForm/AddUserForm.scss
Module build failed: 
undefined
                                    ^
      No mixin named abswidth
Backtrace:
    stdin:281
      in C:\VSTS\SMS Worldwide\SMSProductCatalogue\SMSProductCatalogue\Components\SystemManagement\UserRole\AddUserForm\AddUserForm.scss (line 281, column 38)
Error: 
undefined
                                    ^
      No mixin named abswidth
Backtrace:
    stdin:281
      in C:\VSTS\SMS Worldwide\SMSProductCatalogue\SMSProductCatalogue\Components\SystemManagement\UserRole\AddUserForm\AddUserForm.scss (line 281, column 38)
    at options.error (C:\VSTS\SMS Worldwide\SMSProductCatalogue\SMSProductCatalogue\node_modules\node-sass\lib\index.js:291:26)
 @ ./Components/SystemManagement/UserRole/AddUserForm/AddUserForm.scss 3:14-286
 @ ./Components/SystemManagement/UserRole/AddUserForm/AddUserForm.js
 @ ./Scripts/PageScripts/SystemManagement/UserRole/AddUserRole.js

其中abswidth是_mixins.scss中mixins之一的名称 . 对于使用abswidth的每个组件，此错误将再复制3次 .

如果需要更多信息，请告诉我，

提前致谢 .

javascript css webpack sass