Webpack /反应，如何解决scss装载错误？
Webpack /反应，如何解决scss装载错误？
提问于 2016-06-23 17:58:34
我已经安装了样式加载器、css加载程序、sass加载程序和节点sass.我认为webpack.config文件已经设置好了-- properly...although，似乎遗漏了什么。请帮帮忙！
package.json
{
"name": "pluralsight-redux-starter",
"version": "1.0.0",
"description": "Starter kit for React and Redux Pluralsight course by Cory House",
"author": "Cory House",
"license": "MIT",
"//": "alternative for this include gulp and grunt",
"scripts": {
"//": "react specific library, you can use redux with other libraries as well, like angular etc...",
"prestart": "babel-node tools/startMessage.js",
"start": "npm-run-all --parallel open:src lint:watch test:watch",
"open:src": "babel-node tools/srcServer.js",
"lint": "node_modules/.bin/esw webpack.config.* src tools",
"lint:watch": "npm run lint -- --watch",
"test": "mocha --reporter spec tools/testSetup.js \"src/**/*.test.js\"",
"test:watch": "npm run test -- --watch",
"clean-dist": "npm run remove-dist && mkdir dist",
"prebuild": "npm-run-all clean-dist test link build:html",
"build": "babel-node tools/build.js",
"postbuild": "babel-node tools/distServer.js"
},
"dependencies": {
"babel-polyfill": "6.8.0",
"bootstrap": "3.3.6",
"css-loader": "^0.23.1",
"jquery": "2.2.3",
"node-sass": "^3.8.0",
"react": "15.1.0",
"react-dom": "15.0.2",
"react-redux": "4.4.5",
"react-router": "2.4.0",
"react-router-redux": "4.0.4",
"react-toolbox": "^1.0.1",
"redux": "3.5.2",
"redux-thunk": "2.0.1",
"sass-loader": "^0.5.0",
"style-loader": "^0.13.1",
"toastr": "2.1.2"
},
"devDependencies": {
"babel-cli": "6.8.0",
"babel-core": "6.8.0",
"babel-loader": "6.2.4",
"babel-plugin-react-display-name": "2.0.0",
"babel-preset-es2015": "6.6.0",
"babel-preset-react": "6.5.0",
"babel-preset-react-hmre": "1.1.1",
"babel-register": "6.8.0",
"colors": "1.1.2",
"compression": "1.6.1",
"cross-env": "1.0.7",
"css-loader": "0.23.1",
"enzyme": "2.2.0",
"eslint": "2.9.0",
"eslint-plugin-import": "1.6.1",
"eslint-plugin-react": "5.0.1",
"eslint-watch": "2.1.11",
"eventsource-polyfill": "0.9.6",
"expect": "1.19.0",
"express": "4.13.4",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.8.5",
"jsdom": "8.5.0",
"mocha": "2.4.5",
"nock": "8.0.0",
"npm-run-all": "1.8.0",
"normalize.css": "^4.0.0",
"react-addons-css-transition-group": "^15.0.0",
"open": "0.0.5",
"postcss-loader": "0.8.2",
"react": "^15.0.2",
"react-addons-test-utils": "15.0.2",
"redux-immutable-state-invariant": "1.2.3",
"redux-mock-store": "1.0.2",
"rimraf": "2.5.2",
"sass-loader": "0.5",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "1.13.0",
"webpack-dev-middleware": "1.6.1",
"webpack-hot-middleware": "2.10.0"
},
"repository": {
"type": "git",
"url": "https://github.com/coryhouse/pluralsight-redux-starter"
}
}webpack.config.dev.js
import webpack from 'webpack';
import path from 'path';
const ExtractTextPlugin = require('extract-text-webpack-plugin');
export default {
debug: true,
devtool: 'cheap-module-eval-source-map',
noInfo: false,
entry: [
'eventsource-polyfill', // necessary for hot reloading with IE
'webpack-hot-middleware/client?reload=true', //note that it reloads the page if hot module reloading fails.
'./src/index.js'
],
target: 'web',
output: {
path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './src'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
resolve: {
extensions: ['', '.css', '.scss', '.js']
},
// Tells webpack the types of files that we want it to handle.
module: {
loaders: [
{test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']},
{test: /\.s?css$/, loaders: ['style', 'css', 'sass']},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
{test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
]
}
};控制台中的错误消息：
SyntaxError: /Users/Macbook/projects/pluralsight-redux-starter/src/styles/test.scss: Unexpected token (1:5)
> 1 | form {
| ^
2 | h1 {
3 | color: red;
4 | }
at Parser.pp.raise (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/location.js:22:13)
at Parser.pp.unexpected (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/util.js:89:8)
at Parser.pp.semicolon (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/util.js:76:38)
at Parser.pp.parseExpressionStatement (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/statement.js:499:8)
at Parser.parseExpressionStatement (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/plugins/flow.js:52:20)
at Parser.pp.parseStatement (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/statement.js:168:17)
at Parser.parseStatement (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/plugins/flow.js:30:22)
at Parser.pp.parseBlockBody (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/statement.js:529:21)
at Parser.pp.parseTopLevel (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/statement.js:36:8)
at Parser.parse (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/index.js:129:19)
at parse (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/index.js:47:47)
at File.parse (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/transformation/file/index.js:540:58)
at File.parseCode (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/transformation/file/index.js:626:20)
at /Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/transformation/pipeline.js:52:12
at File.wrap (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/transformation/file/index.js:586:16)
at Pipeline.transform (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/transformation/pipeline.js:50:17)
at Object.transformFileSync (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/api/node.js:152:10)
at compile (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:129:20)
at loader (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:158:14)
at Object.require.extensions.(anonymous function) [as .js] (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:168:7)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (CourseForm.js:4:1)
at Module._compile (module.js:541:32)
at loader (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:158:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:168:7)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (CourseForm.Enzyme.test.js:12:1)
at Module._compile (module.js:541:32)
at loader (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:158:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:168:7)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at /Users/Macbook/projects/pluralsight-redux-starter/node_modules/mocha/lib/mocha.js:219:27
at Array.forEach (native)
at Mocha.loadFiles (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/mocha/lib/mocha.js:216:14)
at Mocha.run (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/mocha/lib/mocha.js:468:10)
at loadAndRun (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/mocha/bin/_mocha:359:22)
at Object.<anonymous> (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/mocha/bin/_mocha:376:3)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Function.Module.runMain (module.js:575:10)
at startup (node.js:160:18)
at node.js:449:3test.scss
form {
h1 {
color: red;
}
}webpack-验证器输出：
import webpack from webpack;
似乎给webpack带来了一个问题--验证者，不知道这是为什么。我不相信这与我的scss装载问题有关。
==> webpack-validator webpack.config.dev.js
Reading: webpack.config.dev.js
/Users/Macbook/projects/pluralsight-redux-starter/webpack.config.dev.js:1
(function (exports, require, module, __filename, __dirname) { import webpack from 'webpack';
^^^^^^
SyntaxError: Unexpected token import
at Object.exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:513:28)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at validateConfig (/usr/local/lib/node_modules/webpack-validator/dist/bin/validate-config.js:13:16)
at /usr/local/lib/node_modules/webpack-validator/dist/bin/webpack-validator.js:35:32回答 4
Stack Overflow用户
回答已采纳
发布于 2016-06-23 18:19:06
从错误的角度看，您似乎在.scss中的某个地方丢失了一个支撑。
SyntaxError: /Users/Macbook/projects/pluralsight-redux-starter/src/styles/test.scss: Unexpected token (1:5)
> 1 | form {
| ^
2 | h1 {
3 | color: red;
4 | }再次检查test.scss并确保一切正常。
Stack Overflow用户
发布于 2016-06-23 19:22:58
使用以下软件包解决了这个问题：
https://www.npmjs.com/package/ignore-styles
添加：
mocha--require ignore-styles
测试脚本和解决问题。
谢谢埃布林
Stack Overflow用户
发布于 2016-06-23 18:03:30
您能否尝试扩展您的配置以包括以下内容：
export default {
resolve: {
extensions: ['', '.css', '.scss', '.js']
},
...
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37998694
复制相关文章
相似问题
腾讯云开发者
