求教:vue + webpack + sass 输出单文件css的配置问题
最近在做一个vue的项目,在配置sass输入单文件css遇到点问题,哪位大神可以指点下哪里出了问题? webpack.base.js
const path = require('path')
const webpack = require('webpack')
const webpackHotMiddlewareConfig = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000'
const getEntries = require('./getEntries')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
context: path.resolve(__dirname, '../'),
output: {
path: path.resolve(__dirname, '../public'),
publicPath: '/',
filename: 'client/js/[name].js',
chunkFilename: 'client/js/[name].js'
},
resolve: {
extensions: ['.js', '.vue', '.css', '.scss'],
alias: {
'@': path.join(__dirname, '..', 'client'),
'scss_vars': '@/manage/assets/styles/vars.scss'
}
},
module: {
loaders: [{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'style-loader!css-loader!sass-loader',
sass: 'style-loader!css-loader!sass-loader?indentedSyntax',
},
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader?importLoaders=1&limit=1000&name=client/css/fonts/[name]-[hash:8].[ext]'
},
{
test: /\.(jpe?g|png|gif)$/,
loader: 'file-loader',
query: {
name: 'client/images/[name].[ext]?[hash]'
}
}
]
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
}
webpack.production.js
const webpack = require('webpack');
const path = require('path')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base')
const getEntries = require('./getEntries')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const productionConf = merge(baseConfig, {
entry: getEntries(),
stats: { children: false },
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new OptimizeCssAssetsPlugin({
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: {removeAll: true } },
canPrint: true
}),
new webpack.LoaderOptionsPlugin({
vue: {
loaders: {
postcss: [
require('autoprefixer')({
browsers: ['last 3 versions']
})
],
css: ExtractTextPlugin.extract({
loader: "css-loader",
fallback: "vue-style-loader"
})
}
}
}),
new ExtractTextPlugin('css/[name].css')
]
})
module.exports = productionConf
结果还是把一些style片段输出到页面上,是哪里的问题?