无法使用导入解析 .jsx 中的 .scss 文件

Question

当我尝试构建我的 React 应用程序时，出现错误。

webpack-dev-server --progress --inline --watch.

ERROR in ./app/index.jsx
Module not found: Error: Can't resolve 'styles/main' in '/Users/jono/dev/recipist/app'
 @ ./app/index.jsx 11:12-34
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/index.jsx

我正在使用 import style from 'styles/main';

在 index.jsx 中导入

这是我的树的样子：

.
├── app
│   ├── index.jsx
│   └── styles
│       └── main.scss
├── index.html
├── output
│   └── bundle.js
├── package.json
└── webpack.config.js

webpack.config.js: https://github.com/jonofan/recipist/blob/master/webpack.config.js

我也曾尝试在配置中不使用解析扩展来引用完整扩展，但同样的问题。

Answer 1

根据您的配置方式，它没有指向正确的文件路径。

使用 import style from './styles/main.scss' 代替

还要确保您已经通过 npm 安装了 css-loader sass-loader 和 style-loader 并保存到您的 package.json

Answer 2

要解决此问题，您应该将 css-loader modules 选项更改为 true:

test: /\.(scss)$/,
use: [
{
    loader: "style-loader"
},
{
    loader: "css-loader",
    options: {
        sourceMap: true,
        modules: true,
    }
 },
 {
     loader: "sass-loader",
     options: {
         sourceMap: true
     }
}]

无法使用导入解析 .jsx 中的 .scss 文件

Can't resolve .scss files in .jsx using import

node.js

reactjs

webpack

react-jsx

webpack-dev-server