Question

我收到一个非常奇怪的错误/行为，经过几个小时的各种配置试验后，我总是会遇到同样的错误

ModuleBuildError: Module build failed:
@import 'path/to/my/_partial.scss';
File to import not found or unreadable ...

每当我使用'npm run dev'进行第一次运行时，以下配置一切都很好，所有.scss文件都可以很好地编译到正确文件夹中的一个.css文件中。但是当我在其中一个scss文件中修改或添加一些scss标记时，会抛出上述错误。但是，这是一个奇怪的部分，当我再次保存而没有修改时，构建再次传递，并且在大多数情况下，控制台不显示构建日志，但css正确重建。起初我一直在寻找错误的路径配置，但第一次运行正确构建，因此找到了文件....我一直在寻找解决方案，但没找到任何东西，在我安装的软件包下面，webpack配置和文件夹结构

我安装的软件包是：

"scripts": { "dev": "set NODE_ENV=development && webpack --watch" } 
"webpack": "^2.1.0-beta.22" 
"resolve-url": "^0.2.1", 
"resolve-url-loader": "^1.6.1", 
"sass-loader": "^4.0.2", 
"style-loader": "^0.13.1", 
"css-loader": "^0.23.1", 
"node-sass": "^4.0.0", 
"extract-text-webpack-plugin": "^2.0.0-beta.4", 
"file-loader": "^0.9.0", 
"glob": "^7.1.1", 
"node-sass": "^4.0.0", 
"path": "^0.12.7",
 "postcss-cssnext": "^2.9.0", 
"postcss-import": "^9.0.0", 
"postcss-loader": "^1.2.1", 
"autoprefixer-loader": "^3.2.0"

我的webpack.config.js非常简单，如下所示：

entry: {
        styles: ['app.scss'],
    },

    output: {
        filename: '[name].css',
        path: __dirname + '/app/styles'
    },

    resolve: {
        modules: [
            path.resolve(__dirname, 'dev'),
            'node_modules'
        ],
        extensions: ['', '.css', '.scss', '.sass']
    },

    module: {
        loaders: [

            // SASS
            {
                test: /\.scss$/,
                loader: extractTextPlugin.extract({
                    fallbackLoader: "style-loader",
                    loader: "css-loader?modules&sourceMap&importLoaders=1&localIdentName=[local]!resolve-url!sass-loader?sourceMap"
                })
            }
        ]
    },

    plugins: [
        new extractTextPlugin({ filename: '[name].css', allChunks: true })
    ]
}

他的文件夹结构在根./dev中包含一个app.scss文件，其中包含其他.scss文件：

@import 'assets/styles/_variables.scss';
@import 'assets/styles/_mixins.scss';

@import 'assets/styles/_base.scss';
@import 'assets/styles/_motion.scss';

@import 'components/form/UiButton/_UiButton.scss';
@import 'components/router/UiSideBar/_SideBar.scss';
@import 'components/router/UiTopMenu/_TopMenu.scss';
@import 'components/router/UiSubMenu/_SubMenu.scss';
@import 'components/router/UiToolBar/_ToolBar.scss';
@import 'components/popup/UiModal/_UiModal.scss';
@import 'components/media/UiSpinner/_UiSpinner.scss';

所以第一个构建总是成功，下一个构建会抛出上面提到的错误但是在没有修改的情况下双重保存后会成功。有没有人遇到过这个问题/行为？或者这是一个错误的配置？

Webpack sass @import

0 个答案: