I'm in the process of trying to upgrade from webpack 1 to 2 and am getting the following error for pretty much all my sass files. Can someone tell me what I'm missing here? For what it's worth this is the original webpack file I'm trying to upgrade https://github.com/davezuko/react-redux-starter-kit/blob/master/config/webpack.config.js
CoreLayout.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
CoreLayout.scss
@import 'variables';
.core-layout__viewport{
position: relative;
top:50px;
&.noHeader{
padding-top:0;
}
}
.hasTopBanner{
.core-layout__viewport{
top: $topBannerHeight + $headerHeight;
}
}
.isWebView{
.core-layout__viewport{
top:0px;
}
&.hasTopBanner{
.core-layout__viewport{
top: $topBannerHeight;
}
}
}
webpack.config.js
debug('Creating configuration.')
const webpackConfig = {
name : 'client',
target : 'web',
devtool : project.compiler_devtool,
resolve : {
extensions : ['', '.js', '.jsx', '.json', '.scss', 'scss']
},
module : {
rules:[]
}
}
webpackConfig.resolve = {
modules: ['node_modules', 'src', project.paths.client(), path.resolve('config'), path.resolve('src/styles') ]
}
console.log('resolve', path.resolve('src/styles'));
// ------------------------------------
// Entry Points
// ------------------------------------
const APP_ENTRY = project.paths.client('main.js')
webpackConfig.entry = {
app : __DEV__
? [APP_ENTRY].concat(`webpack-hot-middleware/client?path=${project.compiler_public_path}__webpack_hmr`)
: [APP_ENTRY],
vendor : project.compiler_vendors
}
// ------------------------------------
// Bundle Output
// ------------------------------------
webpackConfig.output = {
filename : `[name].[${project.compiler_hash_type}].js`,
path : project.paths.dist(),
publicPath : project.compiler_public_path
}
// ------------------------------------
// Externals
// ------------------------------------
webpackConfig.externals = {}
webpackConfig.externals['react/lib/ExecutionEnvironment'] = true
webpackConfig.externals['react/lib/ReactContext'] = true
webpackConfig.externals['react/addons'] = true
// ------------------------------------
// Plugins
// ------------------------------------
webpackConfig.plugins = [
new webpack.DefinePlugin(project.globals),
new HtmlWebpackPlugin({
template : project.paths.client('index.html'),
hash : false,
filename : 'index.html',
inject : 'body',
minify : {
collapseWhitespace : true
}
})
]
// Ensure that the compiler exits on errors during testing so that
// they do not get skipped and misreported.
if (__TEST__ && !argv.watch) {
webpackConfig.plugins.push(function () {
this.plugin('done', function (stats) {
if (stats.compilation.errors.length) {
// Pretend no assets were generated. This prevents the tests
// from running making it clear that there were warnings.
throw new Error(
stats.compilation.errors.map(err => err.message || err)
)
}
})
})
}
if (__DEV__ ) {
debug('Enabling plugins for live development (HMR, NoErrors).')
webpackConfig.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
)
} else if (__PROD__ || __STAGE__ || __REF2__ || __TRAIN__ ) {
debug('Enabling plugins for production (OccurenceOrder, Dedupe & UglifyJS).')
webpackConfig.plugins.push(
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
compress : {
unused : true,
dead_code : true,
warnings : false
}
}),
new webpack.optimize.AggressiveMergingPlugin()
)
}
// Don't split bundles during testing, since we only want import one bundle
if (!__TEST__) {
webpackConfig.plugins.push(
new webpack.optimize.CommonsChunkPlugin({
names : ['vendor']
})
)
}
// ------------------------------------
// Loaders
// ------------------------------------
// JavaScript / JSON
webpackConfig.module.rules = [{
test : /\.(js|jsx)$/,
exclude : /node_modules/,
use:{
loader : 'babel-loader',
options : {
presets: ["es2015", "react", "stage-0"]
}
}
}, {
test : /\.json$/,
loader : 'json'
}]
// ------------------------------------
// Style Loaders
// ------------------------------------
// We use cssnano with the postcss loader, so we tell
// css-loader not to duplicate minimization.
const BASE_CSS_LOADER = 'css-loader'//?sourceMap&-minimize'
webpackConfig.module.rules.push({
test: /\.scss$/,
include: project.paths.client('styles'),
use:[
{
loader: 'style-loader',
options:{
includePaths : project.paths.client('styles')
}
},
BASE_CSS_LOADER,
{
loader: 'postcss-loader',
options: cssnano({
autoprefixer : {
add : true,
remove : true,
browsers : ['last 2 versions']
},
discardComments : {
removeAll : true
},
discardUnused : false,
mergeIdents : false,
reduceIdents : false,
safe : true,
sourcemap : true
})
},
{
loader:'sass-loader',
options:{
sourceMap:true
}
}
]
})
webpackConfig.module.rules.push({
test : /\.css$/,
use:[
'style-loader',
BASE_CSS_LOADER,
'postcss-loader'
]
})
// File loaders
/* eslint-disable */
webpackConfig.module.rules.push(
{ test: /\.woff(\?.*)?$/, loader: 'url-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff' },
{ test: /\.woff2(\?.*)?$/, loader: 'url-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff2' },
{ test: /\.otf(\?.*)?$/, loader: 'file-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=font/opentype' },
{ test: /\.ttf(\?.*)?$/, loader: 'url-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/octet-stream' },
{ test: /\.eot(\?.*)?$/, loader: 'file-loader?prefix=fonts/&name=[path][name].[ext]' },
{ test: /\.svg(\?.*)?$/, loader: 'url-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=image/svg+xml' },
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
)
/* eslint-enable */
module.exports = webpackConfig
UPDATE: I'm also getting the following error for regular CSS files as well "Unexpected token (1:0) You may need an appropriate loader to handle this file type."
.duck {
display: block;
width: 120px;
margin: 1.5rem auto;
}
