Question

当尝试设置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"
  }
}

我的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中，并返回“找不到模块”错误。'

这是我的文件夹结构：

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

任何帮助表示赞赏！

Answer 1

将/styles替换为

./styles

如果index.js和styles位于同一文件夹

Answer 2

@echo off set "user=SK" set "D=%date:~3%" md "%D:/=-% %user%" end是一个绝对路径，因此它将查看文件系统的根目录。您想使用相对路径：

/styles/main.scss

这要求require('./styles/main.scss');与styles位于同一目录中。因此，如果您的项目结构如下：

index.js

你需要上一个目录：

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

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

Answer 3

原来这是一个加载器问题，没有正确的节点模块。只需运行下面的脚本就会出现问题：

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

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

Answer 4

This is majorly a webpack related issue and can appear on any webpack related app Simply include <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion> <dependencies> <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpclient</artifactId> <version>4.5</version> </dependency> <dependency> <groupId>org.yaml</groupId> <artifactId>snakeyaml</artifactId> <version>1.18</version> </dependency> <dependency> <groupId>org.mockito</groupId> <artifactId>mockito-core</artifactId> <version>1.10.19</version> <scope>test</scope> </dependency> <dependency> <groupId>org.hamcrest</groupId> <artifactId>hamcrest-all</artifactId> <version>1.3</version> <scope>test</scope> </dependency> </dependencies> <parent> <groupId>org.jenkins-ci.plugins</groupId> <artifactId>plugin</artifactId> <version>1.583</version> <relativePath /> </parent> <groupId>com.mynamespace</groupId> <artifactId>myartifactid</artifactId> <version>1.1.3</version> <packaging>hpi</packaging> <name>Test</name> <description>Test</description> <url>https://wiki.jenkins-ci.org/display/JENKINS/TODO+Plugin</url> <licenses> <license> <name>MIT License</name> <url>http://opensource.org/licenses/MIT</url> </license> </licenses> <build> <testSourceDirectory>src/test/java</testSourceDirectory> <testOutputDirectory>${project.build.directory}/test-classes</testOutputDirectory> <testResources> <testResource> <directory>src/test/resources</directory> </testResource> </testResources> <pluginManagement> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-release-plugin</artifactId> <version>2.3.2</version> </plugin> <plugin> <groupId>com.atlassian.maven.plugins</groupId> <artifactId>clover-maven-plugin</artifactId> <version>4.1.2</version> <configuration> <generateJson>true</generateJson> <generateXml>true</generateXml> <generateHtml>false</generateHtml> <generatePdf>false</generatePdf> </configuration> </plugin> </plugins> </pluginManagement> </build> <repositories> <repository> <id>repo.jenkins-ci.org</id> <url>http://repo.jenkins-ci.org/public/</url> </repository> </repositories> <pluginRepositories> <pluginRepository> <id>repo.jenkins-ci.org</id> <url>http://repo.jenkins-ci.org/public/</url> </pluginRepository> </pluginRepositories> </project> in your package.json java -Dclover.license.path=/Users/dstein/Desktop/clover.lic -cp "/Users/dstein/.m2/repository/com/atlassian/clover/clover/4.1.2/*" com.atlassian.clover.reporters.json.JSONReporter -i target/clover/clover.db -o clover_json -d file and run processClover({}).

Answer 5

我正在使用VSTS中的CI和自动化为ReactJS和自动部署到SharePoint Online Web部件让我更新VS Code IDE，编辑Gulp文件，CD，MK等...等重新打开VS Code我没有'注意我现在在我的终端窗口中显示的差异目录中。更糟糕的是？我在不同的目录下，不在我的根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纠正Dir
让您Cleans和Builds有希望得到Served。吞下那些。
如果仍然没有工作，那么从新目录中运行a：npm update

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

使用Webpack，SASS和React在'main.scss'上找不到'找不到模块'

5 个答案: