使用 Webpack、SASS 和 React 在 'main.scss' 上出现错误 'cannot find module'
error 'cannot find module' on 'main.scss' with Webpack, SASS, and React
当尝试使用 Webpack 将 SCSS 设置为 运行 我的 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"
}
}
我的 index.js 我在其中导入 main.scss(产生错误):
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 中,并且返回 'Cannot find module' 错误。'
这是我的文件夹结构:
- app
- components
- Home.js
- config
- routes.js
- containers
- styles
- components
- main.scss
- index.html
- index.js
- nodemodules
webpack.config.js
package.json
感谢任何帮助!
将/styles
替换为
./styles
如果 index.js
和 styles
在同一个文件夹中
编辑:如果您来自 Google - 结果 style-loader
和 css-loader
未安装,请确保也安装了。
/styles/main.scss
是绝对路径,所以它会在文件系统的根目录中查找。您要使用相对路径:
require('./styles/main.scss');
这需要 styles
与 index.js
位于同一目录中。因此,如果您的项目结构如下所示:
- styles/
- main.scss
- app/
- index.js
您需要上一级目录:
require('../styles/main.scss');
如果您想使用相对于项目根目录的路径,可以在 webpack 配置中使用 resolve 选项。
事实证明这是加载程序问题,没有正确的节点模块。只需 运行 下面的脚本即可解决问题:
npm install style-loader css-loader --save-dev
以及使用将 "style-loader"、"css-loader" 和 "sass-loader" 添加到 Webpack 而不是 "style"、"css"、"sass".
这主要是一个与 webpack 相关的问题,可以出现在任何与 webpack 相关的应用程序上
只需在 package.json "devDependencies": {...}
文件中包含 "css-loader": "^0.28.6", "style-loader": "^0.18.2"
和 运行 npm update
.
我正在玩 CI 和 VSTS 中的自动化,用于 ReactJS 和自动部署到 SharePoint Online Web 部件让我更新 VS 代码 IDE,编辑 Gulp 文件,CD, MK 的...等。重新打开 VS Code 后,我没有注意到我现在处于差异目录中,如我的终端 window 所示。更糟糕的是?我在另一个目录中,该目录不在我的根 node_modules 文件夹附近!我最初在这里:../node_modules/ - << This is my initial Node mod root!!!
../src/webparts/az
而现在我在:
../node_modules/
../src/webparts\SPWPTest\src\webparts\az
注意:在继续之前记下您的节点、IDE、反应、ES、模块版本等,以防您需要回滚。
解决方案?
- CD 修正目录
- 做你的
Cleans
和 Builds
希望得到 Served
。 Gulp 那些。
- 如果仍然无法工作,那么从新目录 运行 a:
npm update
现在您将 node_modules 添加到本地。是好是坏?我不知道,但它有效! :-)
当尝试使用 Webpack 将 SCSS 设置为 运行 我的 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"
}
}
我的 index.js 我在其中导入 main.scss(产生错误):
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 中,并且返回 'Cannot find module' 错误。'
这是我的文件夹结构:
- app
- components
- Home.js
- config
- routes.js
- containers
- styles
- components
- main.scss
- index.html
- index.js
- nodemodules
webpack.config.js
package.json
感谢任何帮助!
将/styles
替换为
./styles
如果 index.js
和 styles
在同一个文件夹中
编辑:如果您来自 Google - 结果 style-loader
和 css-loader
未安装,请确保也安装了。
/styles/main.scss
是绝对路径,所以它会在文件系统的根目录中查找。您要使用相对路径:
require('./styles/main.scss');
这需要 styles
与 index.js
位于同一目录中。因此,如果您的项目结构如下所示:
- styles/
- main.scss
- app/
- index.js
您需要上一级目录:
require('../styles/main.scss');
如果您想使用相对于项目根目录的路径,可以在 webpack 配置中使用 resolve 选项。
事实证明这是加载程序问题,没有正确的节点模块。只需 运行 下面的脚本即可解决问题:
npm install style-loader css-loader --save-dev
以及使用将 "style-loader"、"css-loader" 和 "sass-loader" 添加到 Webpack 而不是 "style"、"css"、"sass".
这主要是一个与 webpack 相关的问题,可以出现在任何与 webpack 相关的应用程序上
只需在 package.json "devDependencies": {...}
文件中包含 "css-loader": "^0.28.6", "style-loader": "^0.18.2"
和 运行 npm update
.
我正在玩 CI 和 VSTS 中的自动化,用于 ReactJS 和自动部署到 SharePoint Online Web 部件让我更新 VS 代码 IDE,编辑 Gulp 文件,CD, MK 的...等。重新打开 VS Code 后,我没有注意到我现在处于差异目录中,如我的终端 window 所示。更糟糕的是?我在另一个目录中,该目录不在我的根 node_modules 文件夹附近!我最初在这里:../node_modules/ - << This is my initial Node mod root!!!
../src/webparts/az
而现在我在:
../node_modules/
../src/webparts\SPWPTest\src\webparts\az
注意:在继续之前记下您的节点、IDE、反应、ES、模块版本等,以防您需要回滚。
解决方案?
- CD 修正目录
- 做你的
Cleans
和Builds
希望得到Served
。 Gulp 那些。 - 如果仍然无法工作,那么从新目录 运行 a:
npm update
现在您将 node_modules 添加到本地。是好是坏?我不知道,但它有效! :-)