使用 Webpack、SASS 和 React 在“main.scss”上出现错误“找不到模块”

Posted 2023-02-22

【中文标题】使用 Webpack、SASS 和 React 在“main.scss”上出现错误“找不到模块”

【英文标题】：error 'cannot find module' on 'main.scss' with Webpack, SASS, and React

【发布时间】：2017-07-17 10:25:42

【问题描述】：

当尝试设置 SCSS 以使用 Webpack 在我的 React 应用程序上运行样式时，出现错误：

Module not found: Error: Can't resolve 'style' in '/Users/sachinkaria/Workspace/GC' @ ./app/index.js 4:0-29 @ multi ./app/index.js'

在浏览器中：

Uncaught Error: Cannot find module "/styles/main.scss"

我的 webpack.config.js 配置如下：

var htmlWebpackPlugin = require('html-webpack-plugin');-
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin(
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
);

module.exports = 
  entry: [
    './app/index.js'
  ],
  output: 
    path: __dirname + '/dist',
    filename: "index_bundle.js"
  ,
  module: 
    loaders: [
      test: /\.js$/, exclude: /node_modules/, loader: "babel-loader",
            test: /\.scss$/,
            loaders: ['style', 'css', 'sass']
        
    ]
  ,
  plugins: [HTMLWebpackPluginConfig]
;

我的 package.json：

    
  "name": "get-cooked",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": 
    "start": "webpack-dev-server",
    "prod": "webpack -p"
  ,
  "author": "Sachin Karia",
  "license": "ISC",
  "dependencies": 
    "classnames": "^2.2.5",
    "react": "^0.14.6",
    "react-bootstrap": "^0.30.7",
    "react-dom": "^0.14.6",
    "react-router": "^2.0.0-rc5"
  ,
  "devDependencies": 
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-preset-react": "^6.3.13",
    "html-webpack-plugin": "^2.7.1",
    "node-sass": "^4.5.0",
    "sass-loader": "^6.0.2",
    "webpack": "2.2.1",
    "webpack-dev-server": "^1.14.1"
  

我要导入 main.scss 的 index.js（产生错误）：

var React = require('react');
var ReactDOM = require('react-dom');
var routes = require('./config/routes');
require('./styles/main.scss');

ReactDOM.render(routes, document.getElementById('app'));

我所有的 scss 文件都在我的样式文件夹中，但是，我似乎无法将它们导入我的 index.js 并返回“找不到模块”错误。'

这是我的文件夹结构：

- app
  - components
    - Home.js
  - config
    - routes.js
  - containers
  - styles
    - components
    - main.scss
  - index.html
  - index.js
- nodemodules
webpack.config.js
package.json

任何帮助表示赞赏！

【参考方案1】：

原来这是一个加载程序问题，并且没有正确的节点模块。只需运行以下脚本即可解决问题：

npm install style-loader css-loader --save-dev 

以及使用将“style-loader”、“css-loader”和“sass-loader”添加到 Webpack 而不是“style”、“css”、“sass”。

【参考方案2】：

将/styles 替换为

./styles 

如果index.js 和styles 在同一个文件夹中

编辑：如果您来自 Google - 原来 style-loader 和 css-loader 没有安装，请确保这一点。

【讨论】：

我已经添加了 ./styles 但是仍然遇到同样的错误。 index.js 和样式在同一个文件夹中。

所以现在显示为：require('./styles/main.scss')?现在有什么错误？

是的，它在控制台中出现同样的错误：'找不到模块：错误：无法解析'/Users/sachinkaria/Workspace/GC'@./app/index 中的'样式'。 js 4:0-29 @ multi ./app/index.js' 并在我的浏览器控制台中：未捕获的错误：在 webpackMissingModule 上找不到模块“./styles/main.scss”

我被难住了。是否有机会使用您的文件夹和路径更新问题？

原来是加载器问题，style-loader 和 css-loader 没有安装。

【参考方案3】：

/styles/main.scss 是一个绝对路径，因此它会在文件系统的根目录中查找。您想使用相对路径：

require('./styles/main.scss');

这要求styles 与index.js 位于同一目录中。因此，如果您的项目结构如下所示：

- styles/
  - main.scss
- app/
  - index.js

你需要上一个目录：

require('../styles/main.scss');

如果您想使用相对于项目根目录的路径，可以在 webpack 配置中使用 resolve 选项。

【讨论】：

我的 index.js 文件与我的样式文件夹位于同一目录中。我已经添加了 ./styles 但是仍然遇到同样的错误。

【参考方案4】：

这主要是与 webpack 相关的问题，可以出现在任何与 webpack 相关的应用程序上 只需在你的 package.json "devDependencies": ... 文件中包含 "css-loader": "^0.28.6", "style-loader": "^0.18.2" 并运行 npm update。

【参考方案5】：

我在 VSTS 中为 ReactJS 使用 CI 和自动化，并自动部署到 SharePoint Online Web 部件让我更新 VS Code IDE、编辑 Gulp 文件、CD、MK 等。重新打开 VS Code 后，我没有请注意，我现在处于 diff 目录中，如我的终端窗口中所示。更糟糕的是？我在一个不在我的根 node_modules 文件夹附近的不同目录中！我最初在这里：../node_modules/ - << This is my initial Node mod root!!!

../src/webparts/az

而现在我在：

../node_modules/
../src/webparts\SPWPTest\src\webparts\az

注意：在继续之前记下您的节点、IDE、react、ES、模块版本等，以防您需要回滚。

解决方案？

CD 更正目录 你的Cleans 和Builds 希望得到Served。吞下那些。 如果仍然无法正常工作，则在新目录中运行：npm update

现在您将 node_modules 已添加到本地。是好是坏？我不知道，但它有效！ :-)