javascript - vue单页面应用怎么把样式抽取到一个独立文件？

问题描述

问题是这样的现在在做一个SAP应用，webpack配置了抽取文件出来。样式既没有抽取成一个文件也没有被webpack打包到js里面，而是在页面上生成style标签了。求大神指教。用的是vue2，webpack2webpack配置：

var path = require(’path’)var vuxLoader = require('vux-loader');var webpack = require(’webpack’);var ExtractTextPlugin = require('extract-text-webpack-plugin');const webpackConfig = { entry: ’./src/main.js’, output: { path: path.resolve(__dirname, ’./dist’), publicPath: ’/dist/’, filename: ’build.js’ }, module: { rules: [ { test: /.vue$/, loader: ’vue-loader’, options: { loaders: { ’scss’: ’vue-style-loader!css-loader!sass-loader’, ’sass’: ’vue-style-loader!css-loader!sass-loader?indentedSyntax’ } } }, { test: /.js$/, loader: ’babel-loader’, exclude: /node_modules/ }, { test: /iview.src.*?js$/, loader: ’babel’ }, { test: /.css$/, use:new ExtractTextPlugin({ filename:’build.css’, ignoreOrder:true }).extract({ use:{ loader:’css-loader’, options:{modules:true } }, fallback:’style-loader’ }) }, { test: /.less$/, loader:’style-loader!css-loader!less-loader’ }, { test: /.(eot|woff|woff2|ttf)$/, loader: ’url-loader?limit=30000&name=[name]-[hash].[ext]’ }, { test: /.(png|jpg|gif|svg)$/, loader: ’file-loader’, options: { name: ’[name].[ext]?[hash]’ } } ] }, vue:{ loaders :{ css: ExtractTextPlugin.extract({fallback:’style-loader’, use:’css-loader’}) } }, resolve: { alias: { ’vue$’: ’vue/dist/vue.esm.js’ }, extensions: [’.js’, ’.vue’, ’.json’] }, devServer: { historyApiFallback: true, noInfo: true }, performance: { hints: false }, devtool: ’#eval-source-map’};module.exports = vuxLoader.merge(webpackConfig, {plugins:[’vux-ui’]});if (process.env.NODE_ENV === ’production’) { module.exports.devtool = ’#source-map’ // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ ’process.env’: {NODE_ENV: ’'production'’ } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: {warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ])}

package.json:

{ 'name': 'blog', 'description': 'leung blog mobile', 'version': '1.0.0', 'author': 'leung', 'private': true, 'scripts': { 'dev': 'cross-env NODE_ENV=development webpack-dev-server --open --hot --port 8082', 'build': 'cross-env NODE_ENV=production webpack --progress --hide-modules' }, 'dependencies': { 'vue': '^2.2.1' }, 'devDependencies': { 'axios': '^0.16.0', 'babel-core': '^6.0.0', 'babel-loader': '^6.0.0', 'babel-preset-latest': '^6.0.0', 'cross-env': '^3.0.0', 'css-loader': '^0.25.0', 'extract-text-webpack-plugin': '^2.1.0', 'file-loader': '^0.9.0', 'less-loader': '^4.0.3', 'node-sass': '^4.5.0', 'sass-loader': '^5.0.1', 'style-loader': '^0.16.1', 'url-loader': '^0.5.8', 'vue-loader': '^11.1.4', 'vue-router': '^2.3.1', 'vue-style-loader': '^3.0.1', 'vue-template-compiler': '^2.2.1', 'vuex': '^2.2.1', 'vux': '^2.2.1-rc.5', 'vux-loader': '^1.0.57', 'webpack': '^2.2.0', 'webpack-dev-server': '^2.2.0' }}

如果我把这段代码注释了就没报错了 T_T

vue:{ loaders :{ css: ExtractTextPlugin.extract({fallback:’style-loader’, use:’css-loader’}) } },

搞不懂，求赐教

问题解答

下面这个例子给你参考，希望对你有帮助

const path = require(’path’);const webpack = require(’webpack’);const ExtractTextPlugin = require('extract-text-webpack-plugin');const HtmlWebpackPlugin = require(’html-webpack-plugin’);module.exports = { entry: { main: ’./src/index.js’, vendor: [’vue’, ’vue-router’,’vuex’] }, output: { path: path.resolve(__dirname, ’dist’), publicPath: ’’, filename: ’js/build.js’ }, module: { rules: [{test: /.vue$/,use: [{ loader: ’vue-loader’, options: { loaders: { css: ExtractTextPlugin.extract({use: ’css-loader’,fallback: ’vue-style-loader’ }) }, }}] }, {test: /.(js|jsx)$/,use: [{ loader: ’babel-loader’,}],exclude: /node_modules/ }, {test: /.(png|jpg|gif|svg)$/,use: [{ loader: ’file-loader’, options: { name: ’images/[name].[ext]’ }}] } ] }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: ’vendor’, filename: ’js/vendor.min.js’, }), new ExtractTextPlugin('css/style.css'), new HtmlWebpackPlugin({ template: ’public/index.html’ }) ], resolve: { alias: { ’vue$’: ’vue/dist/vue.esm.js’ } }, devServer: { contentBase: path.join(__dirname, 'dist'), stats: 'errors-only', port: 9000, historyApiFallback: true, noInfo: true }, performance: { hints: false }, devtool: ’#eval-source-map’}if (process.env.NODE_ENV === ’production’) { module.exports.devtool = ’#source-map’ module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ ’process.env’: {NODE_ENV: ’'production'’ } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: {warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ])}