Question

我目前正在尝试使用我的webpack应用程序。我已成功配置style-loader＆amp; css-loader。但是，当我尝试实现sass-loader时，我收到以下错误：

bundle.js:598 Uncaught Error: Cannot find module "!!./../../css-loader/index.js!./../../sass-loader/index.js!./index.js?http:/localhost:8000"

让我带您了解我如何安装style-loader＆amp;的步骤css-loader。

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

为webpack.config添加了加载器：

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'react-hot!babel'
    },
    {
      test: /\.css$/,
      exclude: /node_modules/,
      loader: "style-loader!css-loader",
    }
  ]
}

创建了css文件夹并放在那里myStyle.css
将样式表导入反应组件require(../../css/myStyle.css

这很有效，我没有任何问题。在此之后，我尝试添加sass-loader。我采取的步骤与第一步非常相似。

跑npm install sass-loader node-sass --save-dev

将加载程序添加到webpack.config

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'react-hot!babel'
    },
    {
      test: /\.css$/,
      exclude: /node_modules/,
      loader: "style-loader!css-loader",
    },
    {
      text: /\.scss$/,
      exlude: /node_modules/,
      loader: "style-loader!css-loader!sass-loader"
    }
  ]
}

将myStyle.css更改为myStyle.scss。
将样式表导入反应组件require('../../myStyle.scss')

在此之后，我收到上面粘贴在DOM中的错误。这是控制台barfs在我身上的错误：

[1] (webpack)-dev-server/client?http://localhost:8000 1.01 kB {0} [built] [1 error]
[3] ./~/style-loader/addStyles.js 7.15 kB {0} [built]
[4] (webpack)/hot/only-dev-server.js 981 bytes {0} [built] [1 error]
[6] ./src/index.jsx 2.42 kB {0} [built] [1 error]
[7] (webpack)/buildin/module.js 954 bytes {0} [built] [1 error]
[9] ./~/react-hot-loader/~/react-hot-api/modules/index.js 993 bytes {0} [built] [1 error]
[11] ./~/react-hot-loader/RootInstanceProvider.js 975 bytes {0} [built] [1 error]
[13] ./~/react/lib/ReactMount.js 966 bytes {0} [built] [1 error]
[15] ./~/react/react.js 930 bytes {0} [built] [1 error]
[18] ./~/react-hot-loader/makeExportsHot.js 957 bytes {0} [built] [1 error]

ERROR in ./~/css-loader!./~/sass-loader!./src/index.jsx
Module build failed: 
import React from 'react';
^
  Invalid CSS after "i": expected 1 selector or at-rule, was "import React from '"
  in /Users/tsiebenhaar/Sites/extendedFamily-frontend/src/index.jsx (line 1, column 1)
 @ ./src/index.jsx 8:14-115 17:2-21:4 18:20-121

ERROR in ./~/css-loader!./~/sass-loader!(webpack)-dev-server/client?      http:/localhost:8000
Module build failed: 
var url = require('url');
^
  Invalid CSS after "v": expected 1 selector or at-rule, was "var url = require('"
  in /Users/tsiebenhaar/Sites/extendedFamily-frontend/node_modules/webpack-dev-server/client/index.js (line 1, column 1)
@ (webpack)-dev-server/client?http://localhost:8000 4:14-115 13:2-17:4 14:20-121

ERROR in ./~/css-loader!./~/sass-loader!(webpack)/hot/only-dev-server.js
Module build failed: 
var lastData;
^
  Property "var" must be followed by a ':'
  in /Users/tsiebenhaar/Sites/extendedFamily-frontend/node_modules/webpack/hot/only-dev-server.js (line 7, column 2)
 @ (webpack)/hot/only-dev-server.js 4:14-104 13:2-17:4 14:20-110

ERROR in ./~/css-loader!./~/sass-loader!./~/react-hot-   loader/RootInstanceProvider.js
Module build failed: 
'use strict';
^
  Invalid CSS after "'": expected 1 selector or at-rule, was "'use strict';"
  in /Users/tsiebenhaar/Sites/extendedFamily-frontend/node_modules/react-hot-loader/RootInstanceProvider.js (line 1, column 1)
 @ ./~/react-hot-loader/RootInstanceProvider.js 4:14-103 13:2-17:4 14:20-109

ERROR in ./~/css-loader!./~/sass-loader!(webpack)/buildin/module.js
Module build failed: 
module.exports = function(module) {
         ^
  Invalid CSS after "module.exports": expected "{", was "= function(module) "
  in /Users/tsiebenhaar/Sites/extendedFamily-frontend/node_modules/webpack/buildin/module.js (line 1, column 15)
@ (webpack)/buildin/module.js 4:14-95 13:2-17:4 14:20-101

ERROR in ./~/css-loader!./~/sass-loader!./~/react-hot-loader/makeExportsHot.js
Module build failed: 
'use strict';
^
  Invalid CSS after "'": expected 1 selector or at-rule, was "'use strict';"
  in /Users/tsiebenhaar/Sites/extendedFamily-frontend/node_modules/react-hot-loader/makeExportsHot.js (line 1, column 1)
 @ ./~/react-hot-loader/makeExportsHot.js 4:14-97 13:2-17:4 14:20-103

ERROR in ./~/css-loader!./~/sass-loader!./~/react/lib/ReactMount.js
Module build failed: 
 */
  ^
  Invalid CSS after " */": expected 1 selector or at-rule, was "'use strict';"
  in /Users/tsiebenhaar/Sites/extendedFamily-frontend/node_modules/react/lib/ReactMount.js (line 10, column 4)
 @ ./~/react/lib/ReactMount.js 4:14-99 13:2-17:4 14:20-105

ERROR in ./~/css-loader!./~/sass-loader!./~/react-hot-loader/~/react-hot-api/modules/index.js
Module build failed: 
'use strict';
^
  Invalid CSS after "'": expected 1 selector or at-rule, was "'use strict';"
  in /Users/tsiebenhaar/Sites/extendedFamily-frontend/node_modules/react-hot-loader/node_modules/react-hot-api/modules/index.js (line 1, column 1)
 @ ./~/react-hot-loader/~/react-hot-api/modules/index.js 4:14-106 13:2-17:4 14:20-112

ERROR in ./~/css-loader!./~/sass-loader!./~/react/react.js
Module build failed: 
'use strict';
^ 
  Invalid CSS after "'": expected 1 selector or at-rule, was "'use strict';"
  in /Users/tsiebenhaar/Sites/extendedFamily-frontend/node_modules/react/react.js (line 1, column 1)
 @ ./~/react/react.js 4:14-88 13:2-17:4 14:20-94
webpack: bundle is now VALID.

任何建议或帮助将不胜感激。现在我要睡觉了，明天早上会回来看看。快乐的编码给所有人和所有晚安！

Answer 1

看来你正在尝试加载一个jsx文件（在./~/css-loader！./~ / sass-loader！ ./ src / index.jsx 中）而不是css / scss / sass文件。

实现sass-loader webpack时出错

1 个答案: