![](/img/trans.png)
[英]Webpack Cannot load pdf file: Module parse failed You may need an appropriate loader to handle this file type
[英]webpack Error :Module parse failed You may need an appropriate loader to handle this file type
我想用extract-text-webpack-plugin从sass文件中提取并编译css代码,但是webpack给我这个错误:
ERROR in ./style.scss
Module parse failed: H:\projects\new\app\style.scss Unexpected token (1:4)
You may need an appropriate loader to handle this file type.
| body{
| background-color: #d9534f;
| }
@ ./index.js 2:0-22
我的webpack和extract-text-webpack-plugin版本:
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"webpack": "^2.1.0-beta.22"
我的webpack.config.js
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
let extractCSS = new ExtractTextPlugin('test.css');
module.exports = {
context:path.resolve(__dirname, 'app'),
entry: './index.js',
output: {
path: path.resolve(__dirname, 'app'),
filename: 'bundle.js'
},
module: {
loader: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
, {
test: /\.s?css$/,
loader: extractCSS.extract({ fallbackLoader: 'style-loader', loader: 'css-loader!sass-loader' })
}
, {
test: /\.html$/,
loader: 'raw-loader'
},
{
test: /\.(jpe?g|png|gif)$/,
exclude: /(node_modules)/,
loader: 'url-loader?limit=10000'
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&minetype=application/font-woff'
}, {
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader'
}
]
},
plugins: [
extractCSS,
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'app')+'/index.html',
inject: 'body'
})
]
};
和我简单的.scss文件:
body{
background-color: #d9534f;
}
以这种方式为我工作。
添加const ExtractTextPlugin = require("extract-text-webpack-plugin");
前几名。
并将其添加到加载器中:
test: /\.s?css$/,
loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!sass-loader'}),
},
我解决了:
module: {
loaders: [
{
代替
module: {
loader: [
{
这里你去哥们
{ test: /\.sass$/, use: extractText.extract({ fallback: 'style-loader', use: 'css-loader!sass-loader' }) }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.