实现 sass-loader webpack 时出错
Posted
技术标签:
【中文标题】实现 sass-loader webpack 时出错【英文标题】:Error implementing sass-loader webpack 【发布时间】:2017-02-16 00:36:12 【问题描述】:我目前正在尝试让 sass 与我的 webpack 应用程序一起工作。我已经成功配置了style-loader
和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
和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 中的错误。这是控制台向我发出的错误:
[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.
任何建议或帮助将不胜感激。现在我要睡觉了,明天早上再回来检查。祝大家编码愉快,祝大家晚安!
【问题讨论】:
【参考方案1】:您似乎正在尝试加载 jsx 文件(在 ./~/css-loader!./~/sass-loader!./src/index.jsx)而不是 css /scss/sass 文件。
【讨论】:
以上是关于实现 sass-loader webpack 时出错的主要内容,如果未能解决你的问题,请参考以下文章
带有 Webpack 的 sass-loader 不会生成 CSS
css-loader,sass-loader 不工作 webpack 2
带有 webpack 和 sass-loader 的 Susy 网格