我正在尝试从webpack 1升级到2，并且几乎所有的sass文件都出现以下错误。谁能告诉我我在这里失踪了什么？对于它的价值，这是我试图升级https://github.com/davezuko/react-redux-starter-kit/blob/master/config/webpack.config.js的原始webpack文件
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
更新：我也为常规CSS文件收到以下错误＆＃34;意外令牌（1：0） 您可能需要一个合适的加载程序来处理此文件类型。＆＃34;
.duck {
display: block;
width: 120px;
margin: 1.5rem auto;
}