我用的是"webpack": "^4.20.2" ,extract-text-webpack-plugin用不了了。

来源:5-1 开发时服务端渲染的配置和原理

湫朋

2018-10-02

报错:

ssr@1.0.0 build:client D:\workspace\ssr

> cross-env NODE_ENV=production webpack --mode production --config build/webpack.config.js

clean-webpack-plugin: D:\workspace\ssr\build\public has been removed.

Hash: e0ab2da75124df63960a

Version: webpack4.20.2 

Time: 5158ms

Built at: 2018-10-2 21:31:09

 2 assets

Entrypoint app = app.min.js app.min.js.map

   [2] (webpack)/buildin/global.js 509 bytes {0} [built]

   [3] ./client/components/app.vue + 3 modules 5.28 KiB {0} [built]

       |    4 modules

   [4] ./client/client-entry.js + 9 modules 65.9 KiB {0} [built]

       | ./client/client-entry.js 332 bytes [built]

       | ./client/create-app.js 475 bytes [built]

       | ./client/util/bus.js 51 bytes [built]

       | ./client/router/router.js 173 bytes [built]

       | ./client/store/store.js 425 bytes [built]

       | ./client/router/routes.js 100 bytes [built]

       | ./client/store/state/state.js 46 bytes [built]

       | ./client/store/mutations/mutations.js 123 bytes [built]

       | ./client/store/actions/actions.js 142 bytes [built]

       |     + 1 hidden module

    + 6 hidden modules


ERROR in ./node_modules/extract-text-webpack-plugin/dist/loader.js?{"omit":1,"remove":true}!./node_modules/vue-style-loader!./node_modules/css-loader?minimize!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":false}!./node_modules/px2rem-loader?remUnit=40&remPrecision=8!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./client/components/app.vue

Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example

    at Object.pitch (D:\workspace\ssr\node_modules\extract-text-webpack-plugin\dist\loader.js:59:11)

这是在升级之前vue组件的rule

{

        test: /\.vue$/,

        use: [{

          loader: 'vue-loader',

          options: {

            cssModules: { localIdentName: '[path][name]---[local]---[hash:base64:5]', camelCase: true },

            loaders: isDev ? {

              css: 'vue-style-loader!css-loader!px2rem-loader?remUnit=40&remPrecision=8',

              scss: 'vue-style-loader!css-loader!px2rem-loader?remUnit=40&remPrecision=8!sass-loader'

            } : {

              css: ExtractTextPlugin.extract({ use: 'css-loader?minimize!px2rem-loader?remUnit=40&remPrecision=8', fallback: 'vue-style-loader ' }),

              scss: ExtractTextPlugin.extract({ use: 'css-loader?minimize!px2rem-loader?remUnit=40&remPrecision=8!sass-loader', fallback: 'vue-style-loader' })

            }

          }

        }]

      }

我用的是"webpack": "^4.20.2" ,extract-text-webpack-plugin用不了了。提取scss文件报错,打算用mini-css-extract-plugin但是vue组件的样式我用的是scss,并用利用px2rem-loader转换样式单位,我想用mini-css-extract-plugin该怎么改啊

写回答

2回答

Jokcy

2018-10-05

webpack4用mini-css-extract-plugin

0
0

tulies

2018-10-03

你需要npm i extract-text-webpack-plugin@next -D

0
0

Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲

深入讲解Vue核心技术,展示Vue应用开发中的各种问题和解决方案

3168 学习 · 853 问题

查看课程