CSS中的Webpack Uglify错误
Webpack Uglify errors in CSS
我很紧张,试图让Uglify与我的项目一起工作,以前我使用过Uglify,没有出现问题,但现在我认为这与SASS有关。
ERROR in ./~/css-loader!./~/sass-loader!./app/scss/global-header.scss
Module build failed: TypeError: Cannot read property '4' of undefined
at reduce (/Users/contractor/centralefcom-global-components/node_modules/postcss-reduce-transforms/dist/index.js:121:23)
at walk (/Users/contractor/centralefcom-global-components/node_modules/postcss-value-parser/lib/walk.js:7:22)
at ValueParser.walk (/Users/contractor/centralefcom-global-components/node_modules/postcss-value-parser/lib/index.js:18:5)
at /Users/contractor/centralefcom-global-components/node_modules/postcss-reduce-transforms/dist/index.js:131:75
at /Users/contractor/centralefcom-global-components/node_modules/postcss/lib/container.js:92:28
at /Users/contractor/centralefcom-global-components/node_modules/postcss/lib/container.js:73:26
...
...
这个错误重复了很多次,每个多束重复一次。
这是我的webpack配置。
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
module.exports = {
context: __dirname,
resolve: {
modulesDirectories: ['node_modules', 'bower_components']
},
entry: {
'all': [
'./app/global-all.js',
'./app/scss/global-all.scss'
],
'footer': [
'./app/global-footer.js',
'./app/scss/global-footer.scss'
],
'header': [
'./app/global-header.js',
'./app/scss/global-header.scss'
],
'footer.nodeps': [
'./app/global-footer-nodeps.js',
'./app/scss/global-footer-nodeps.scss'
],
'header.nodeps': [
'./app/global-header-nodeps.js',
'./app/scss/global-header-nodeps.scss'
],
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'js/global.[name].js',
},
module: {
loaders: [
{
test: /'.scss$/,
loader: ExtractTextPlugin.extract('style','css!sass!')
},
{
test: /'.(woff|woff2|ttf|eot|svg)('?v=[0-9]'.[0-9]'.[0-9])?$/,
loader: 'file?name=/assets/[name].[ext]'
},
{
test: /'.(jpg|jpeg|png)$/,
loader: 'file?name=/assets/[name].[ext]'
}
],
},
plugins: [
new webpack.EnvironmentPlugin([
'NODE_ENV'
]),
new ExtractTextPlugin('css/global.[name].css'),
new HtmlWebpackPlugin({
template: 'underscore-template-loader!./app/views/secondary.html',
inject: false,
filename: 'secondary.html'
}),
new HtmlWebpackPlugin({
template: 'underscore-template-loader!./app/views/secondary-transparent.html',
inject: false,
filename: 'secondary-transparent.html'
}),
new HtmlWebpackPlugin({
template: 'underscore-template-loader!./app/views/secondary-academy.html',
inject: false,
filename: 'secondary-academy.html'
}),
new HtmlWebpackPlugin({
template: 'underscore-template-loader!./app/views/hero-stage.html',
inject: false,
filename: 'hero-stage.html'
}),
// Only minify in build, check npm tasks
new webpack.optimize.UglifyJsPlugin({
sourceMap: false,
mangle: false
}),
]
};
如果我评论uglifyJsPlugin行,没有错误。但我必须做缩小,没有办法让它运行,我尝试了mangler:假的,什么都没有,不起作用。
您正试图通过不支持的UglifyJs插件传递CSS文件。
为了只丑化你的JS源代码,你可以根据文件扩展名进行过滤。
下面的示例将仅包含扩展名为.js
或.jsx
的Uglify文件:
new webpack.optimize.UglifyJsPlugin({
sourceMap: false,
mangle: false,
test: /'.(js|jsx)$/
})
您将SCSS文件作为入口点的一部分。在webpack中,更常见的做法是在JS文件中要求您需要的文件(SCSS方面)。
// Here, the ExtractTextPlugin will use sass-loader to extract and compile styles
require('styles.scss');
// The rest of your code goes here
// For instance, app.js
function someCode() {
document.body.style.backgroundColor = 'blue';
}
然后设置sass加载程序来检测和处理那些require语句,这些语句已经用下面的加载程序完成了。
{
test: /'.scss$/,
loader: ExtractTextPlugin.extract('style','css!sass!')
}
相关文章:
- Node.js v6.2.0类扩展不是函数错误
- Jquery菜单操作不稳定,定位不正确,存在一般错误
- document.open/document.write没有正确地清除chrome中的文档——这是chrome的错误吗
- 试图在引导模式内动态生成图表,得到offsetWidth错误
- 为什么会出现错误;未捕获的类型错误:undefined不是函数;
- 我如何修复包含在captcha的addthis中的错误
- 同样,同样的错误'ahorcado.js:26未捕获类型错误:无法读取属性'beginPath'
- 节点是否需要模块传递带有方括号的arg?这是个错误吗
- Webpack/Rect:遵循egghead.io教程,但出现错误:您可能需要一个合适的加载程序来处理此文件类型
- CKFinder 3为所选文件返回错误的URL
- 同位素库错误:未捕获错误无布局模式包装生产线8
- 铬:“;未捕获的语法错误:意外的标记:"
- 如何通过自己获得Chrome扩展的用户反馈/错误报告
- 相位器状态未捕获参考错误
- Uglify JS错误:意外字符''连接时,请缩小select2
- CSS中的Webpack Uglify错误
- Gulp - 使用 gulp-uglify 和 gulp-concat 的意外令牌错误
- Gulp uglify 失败并显示 js 解析错误
- gullow uglify的未处理错误事件
- Grunt-contrib-uglify在使用默认值的函数参数时抛出错误