Vue-loader: Extracting CSS into a Single File

[itveev]

After update to babel 6.x and vue-loader 7.x example "Extracting CSS into a Single File" stopped working.

[azamat-sharapov]

68 ?

[itveev]

It doesn't help

[yyx990803]

It works fine for me with vue-loader 7.0.3. Please be more specific about what is not working, e.g. errors etc.

Also make sure you have done a clean install of your node_modules.

[itveev]

In webstorm I create new project nodejs+express with jade and stylus. Package.json :

{
  "name": "extracttext",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "babel-node --presets babel-preset-es2015 ./bin/www",
    "build": "babel-node --presets babel-preset-es2015 ./build.js"
  },
  "dependencies": {
    "body-parser": "~1.13.2",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "express": "~4.13.1",
    "jade": "~1.11.0",
    "morgan": "~1.6.1",
    "serve-favicon": "~2.3.0",
    "stylus": "0.42.3",
    "vue": "^1.0.8",
    "vue-router": "^0.7.6"
  },
  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-plugin-transform-runtime": "^6.1.18",
    "babel-preset-es2015": "^6.1.18",
    "babel-runtime": "^6.2.0",
    "css-loader": "^0.21.0",
    "extract-text-webpack-plugin": "^0.9.1",
    "style-loader": "^0.13.0",
    "stylus-loader": "^1.4.2",
    "template-html-loader": "0.0.3",
    "vue-hot-reload-api": "^1.2.1",
    "vue-html-loader": "^1.0.0",
    "vue-loader": "^7.1.1",
    "webpack": "^1.12.6"
  }
}

Webpack.config:

/**
 * Created by root on 16.09.15.
 */
"use strict";
import webpack from "webpack";
import path from "path";
import ExtractTextPlugin from "extract-text-webpack-plugin";
export default  {
  context: __dirname,
  entry: "./vue/client.entry.js",
  output:{
    path: path.join(__dirname,"public/production"),
    filename:"production.js"
  },

  module :{
    loaders:[
      {
        test:/\.vue$/,
        loader:"vue"
      },
      {
        test:/\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel",
        query:{
          cacheDirectory:true,
          presets:["es2015"]
        }
      }
      //{
      //  test: /\.css$/,
      //  loader: ExtractTextPlugin.extract("style-loader","css-loader")
      //},
      //{
      //  test: /\.styl$/,
      //  loader: ExtractTextPlugin.extract("style-loader","css-loader!stylus-loader")
      //},
      //{
      //  test:/\.html$/,
      //  loader:"html-loader"
      //},
      //{
      //  test:/\.(eot|woff|ttf|svg|png|jpg)$/,
      //  loader:"url-loader?limit=30000&name=[name]-[hash].[ext]"
      //}
    ]
  },
  vue:{
    loader:{
      css: ExtractTextPlugin.extract("css"),
      stylus: ExtractTextPlugin.extract("css!stylus")
    }
  },
  babel: {
    presets: ['es2015'],
    plugins: ['transform-runtime']
  },
  plugins:[
      new webpack.optimize.DedupePlugin(),
      new webpack.DefinePlugin({
          "process.env": {
              NODE_ENV: JSON.stringify("production"),
              PORT: 8080
          }
      }),
      //new webpack.optimize.UglifyJsPlugin({
      //    compress:{
      //        warnings:false
      //    }
      //}),
      new ExtractTextPlugin("production.css")
  ],
  devtool:'source-map'
}

Client.entry:

"use strict";
import Vue from "vue";
import VueRouter from "vue-router";
import configRouter from "./route.config.js";
import appVue from "./app.vue";

//import testcss from "../public/stylesheets/style.styl";
//import testcss1 from "../public/stylesheets/index.css";
//import testcss2 from "../public/stylesheets/style.css";
//import testcss3 from "../public/stylesheets/index.styl";

Vue.use(VueRouter);

const router = new VueRouter({
  history:true,
  saveScrollPosition:true
});

configRouter(router);

const App = Vue.extend(appVue);
router.start(App,"#app");

Route.config:

"use strict";
import Vue from "vue";
import indexVue from "./index.vue";


export default (router)=>{
  router.map({
    "":{
      component : indexVue,
    }
  });
}

app.vue:

<style lang = "stylus">
  .my1
    font-family 'Roboto', Helvetica, Arial, sans-serif
    font-weight 500
    font-size 20px
    color #333
</style>

<template lang = "jade">
    router-view
</template>

<script lang="babel" type="text/babel">
    export default {
      data() {
        return { }
      }
    }
</script>

index.vue:

<style lang = "stylus" >
  .my2
    font-family 'Roboto', Helvetica, Arial, sans-serif
    font-weight 400
    font-size 40px
    color #333
</style>

<template lang ="jade">
  slot
    .my2 HELLO!
</template>

<script lang = "babel" type="text/babel">
  export default {
    data() {
      return { }
    },
    components : {
    }
  }
</script>

You can see commented block in webpack.config and client.entry. I tested out extract-text-plugin without vue and in works fine. Any ideas?

[fobdy]

Same problem for me but with following message

./app/components/app/app.vue
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../../../../../../myapp/node_modules/extract-text-webpack-plugin/loader.js in /Users/user/Documents/projects/html/myapp/app/components/app

loader.js exists there

[fobdy]

Also there is error

Uncaught Error: Cannot find module "-!./../../../..!./../../../node_modules/vue-loader/lib/style-rewriter.js?id=_v-063a55c3!./../../../../../../../../../myapp/node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!style-loader!css-loader!./../../../node_modules/vue-loader/lib/selector.js?type=style&index=0!./app.vue"

[rtibbles]

I am having a similar problem - using a similar configuration (verbatim from the docs, except using stylus instead of css or less).

When I say it 'doesn't work' it simply makes no difference to the build, and no text is extracted, with the css still being built into the JS file.

[yyx990803]

Closing (outdated)

[martynchamberlin]

Actually I'm still having the exact error as described by @fobdy.