[英]Sass loader not working in webpack
I am trying to get *.scss files to be supported in my webpack configuration but I keep getting the following error when I run the webpack build command: 我试图在我的webpack配置中获得* .scss文件,但是当我运行webpack build命令时,我不断收到以下错误:
ERROR in ./~/css-loader!./~/sass-loader!./app/styles.scss
Module build failed: TypeError: Cannot read property 'sections' of null
at new SourceMapConsumer (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/node_modules/source-map/lib/source-map/source-map-consumer.js:23:21)
at PreviousMap.consumer (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/previous-map.js:37:34)
at new Input (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/input.js:42:28)
at parse (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/parse.js:17:17)
at new LazyResult (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:54:47)
at Processor.process (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/processor.js:30:16)
at processCss (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/lib/processCss.js:168:24)
at Object.module.exports (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/lib/loader.js:21:15)
@ ./app/styles.scss 4:14-117
I can't for the life of me figure out why. 我不能为我的生活找出原因。 It's a very basic setup.
这是一个非常基本的设置。
I have created a dropbox share with the bare minimum illustrating this: https://www.dropbox.com/s/quobq29ngr38mhx/webpack.sass.test.zip?dl=0 我创建了一个Dropbox共享,其中最简单的说明如下: https : //www.dropbox.com/s/quobq29ngr38mhx/webpack.sass.test.zip?dl = 0
Unzip this then run: 解压缩然后运行:
npm install
webpack
Here is my webpack.config.js file: 这是我的webpack.config.js文件:
var path = require('path')
var webpack = require('webpack')
module.exports = {
devtool: 'eval',
entry: [
'./app'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'index.js',
publicPath: '/dist/'
},
plugins: [
new webpack.NoErrorsPlugin()
],
resolve: {
extensions: ['', '.js']
},
module: {
loaders: [{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
}]
}
}
And the index.js entry file: 和index.js条目文件:
require('./styles.scss');
alert('foo bar baz');
And the styles.scss file: 和styles.scss文件:
body {
background-color: #000;
}
It appears to follow the recommendations of the sass-loader documentation site, but I can't get it to run. 它似乎遵循sass-loader文档站点的建议,但我无法运行它。
:( :(
Information about my environment: 有关我的环境的信息:
node - 0.12.4
npm - 2.10.1
os - OS X Yosemite
I have managed to get another workaround working that doesn't involve editing the css-loader libraries within my npm_modules directory (as per the answer by @chriserik). 我设法得到另一种解决方法,不涉及在我的npm_modules目录中编辑css-loader库(根据@chriserik的答案)。
If you add '?sourceMap' to the sass loader the css loader seems to handle the output. 如果你将'?sourceMap'添加到sass加载器,css加载器似乎处理输出。
Here is my updated configuration: 这是我更新的配置:
var path = require('path')
var webpack = require('webpack')
module.exports = {
devtool: 'eval',
entry: [
'./app'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'index.js',
publicPath: '/dist/'
},
plugins: [
new webpack.NoErrorsPlugin()
],
resolve: {
extensions: ['', '.js']
},
module: {
loaders: [{
test: /\.scss$/,
loader: 'style!css!sass?sourceMap'
}]
}
}
PS I even expanded this test to include a compass-mixins include, and this worked too. PS我甚至扩展了这个测试,包括一个指南针混合包含,这也有效。
After having the same issue, I found this: https://github.com/webpack/css-loader/issues/84 遇到同样的问题后,我发现了这个: https : //github.com/webpack/css-loader/issues/84
Apparently, the solution for now is to manually modify lines 17-19 of /node_modules/css-loader/lib/loader.js with 显然,现在的解决方案是手动修改/node_modules/css-loader/lib/loader.js的第17-19行
if(map && typeof map !== "string") {
map = JSON.stringify(map);
}
This fixed the problem for me. 这解决了我的问题。
The problem is solved by setting source-map
option to true (as seen in other answers). 通过将
source-map
选项设置为true来解决该问题(如其他答案中所示)。
But in case you find messy passing options in the query string there is an alternative; 但是,如果您在查询字符串中发现混乱的传递选项,则有另一种选择;
for configuring the sass loader you can create a sassLoader
property in the webpack config object: 要配置sass加载器,您可以在webpack配置对象中创建一个
sassLoader
属性:
module.exports = {
devtool: 'eval',
entry: [
'./app'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'index.js',
publicPath: '/dist/'
},
plugins: [
new webpack.NoErrorsPlugin()
],
resolve: {
extensions: ['', '.js']
},
module: {
loaders: [{
test: /\.scss$/,
loader: 'style!css!sass'
// loader: ExtractPlugin.extract('style', 'css!sass'),
}]
},
sassLoader: {
sourceMap: true
},
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.