スコープCSSは（開発に取り組ん）ExtractTextPlugin

Question

例Vueのコード使用時にスコープを失う：開発で

<template lang="pug"> 
    .wrapper 
</template> 

<style lang="stylus" scoped> 
    .wrapper 
    min-height: 100vh 
    display: flex 
    justify-content: center 
    align-items: center 
    flex-wrap: wrap 
    text-align: center 
</style> 

を、これは期待どおりに動作します。この特定のテンプレート内の.wrapperのみが、data-v-XXX属性のおかげでそれに適用されたスタイリングを取得します。

ただし、抽出テキストプラグインを使用した制作では、スタイリングは有効範囲外に生成されます。重大な意味を持つのは、重要な属性であるdata-v-XXXと同じです。マイwebpack.production.config.js

：

'use strict' 

const webpack = require('webpack') 
const ExtractTextPlugin = require('extract-text-webpack-plugin') 
const autoprefixer = require('autoprefixer') 
const rupture = require('rupture') 

if (!process.env.NODE_ENV) process.env.NODE_ENV === 'production' 

module.exports = { 
    context: __dirname, 
    entry: './app/src/client.js', 
    output: { 
    path: __dirname + '/app/static/dist', 
    filename: 'bundle.js' 
    }, 
    resolve: { 
    extensions: ['.js', '.vue', '.pug', '.styl'] 
    }, 
    plugins: [ 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.DefinePlugin({ 
     DEVMODE: process.env.NODE_ENV === 'development' 
    }), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.UglifyJsPlugin(), 
    new webpack.optimize.AggressiveMergingPlugin(), 
    new ExtractTextPlugin('style.css'), 
    // This is until these loaders are updated for the new config system 
    new webpack.LoaderOptionsPlugin({ 
     options: { 
     // Enables this workaround setup to work 
     context: __dirname, 
     // Actual options 
     postcss:() => [ 
      autoprefixer({ 
      browsers: ['last 3 versions', 'ie >= 9'] 
      }) 
     ], 
     stylus: { 
      use: [rupture()] 
     } 
     } 
    }) 
    ], 
    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     loader: 'babel', 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.vue$/, 
     loader: 'vue', 
     options: { 
      loaders: { 
      css: ExtractTextPlugin.extract({ 
       loader: 'css', 
       fallbackLoader: 'vue-style' 
      }), 
      stylus: ExtractTextPlugin.extract({ 
       loader: [ 
       'css?-autoprefixer', // Disable css-loader's internal autoprefixer 
       'csso', 
       'postcss', 
       'stylus' 
       ], 
       fallbackLoader: 'vue-style' 
      }) 
      } 
     } 
     }, 
     { 
     test: /\.pug$/, 
     loader: 'pug' 
     }, 
     { 
     test: /\.styl$/, 
     loader: ExtractTextPlugin.extract({ 
      loader: [ 
      'css?-autoprefixer', // Disable css-loader's internal autoprefixer 
      'csso', 
      'postcss', 
      'stylus' 
      ], 
      fallbackLoader: 'style' 
     }) 
     } 
    ] 
    } 
} 

マイ開発の設定が実質的に同一バーエキステキストプラグインです。

ご協力いただきありがとうございます。

Answer 1

でロードされているroutes.jsの動的要求があることが大きなノーであることが分かります。これに

const view = fileName => require(`./components/pages/${fileName}`) 

export default [ 
    { 
    path: '/', 
    redirect: { 
     name: 'intro' 
    } 
    }, 
    { 
    path: '/intro', 
    name: 'intro', 
    component: view('Intro') 
    }, 
    { 
    path: '/form', 
    name: 'form', 
    component: view('Form') 
    }, 
    // Backup catch-all route 404 
    { 
    path: '*', 
    component: view('404') 
    } 
] 

：

はこれを変更

export default [ 
    { 
    path: '/', 
    redirect: { 
     name: 'intro' 
    } 
    }, 
    { 
    path: '/intro', 
    name: 'intro', 
    component: require('./components/pages/Intro') 
    }, 
    { 
    path: '/form', 
    name: 'form', 
    component: require('./components/pages/Form') 
    }, 
    // Backup catch-all route 404 
    { 
    path: '*', 
    component: require('./components/pages/404') 
    } 
] 

私はWebPACKの静的文脈のために必要となる分析を信じているとして、これは理にかなっているとします。