vuejs / vue-style-loader

💅 vue style loader module for webpack
MIT License
226 stars 68 forks source link

only some vue component's style wouldn't extract into css file #4

Open oliver1521314 opened 7 years ago

oliver1521314 commented 7 years ago

this is the code of vue file


<template>
    <div id='userManagePart'>   
        <div>
            <con-title>用户管理</con-title>
        </div>
        <el-row>
            <el-col :span="5">
                <div>
                 <teemTree></teemTree>  
                </div>      
            </el-col>
            <el-col :span="19">
                <div>
                    <userDataList></userDataList>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

Only the style markup of teemTree component wouldn't be extract into css file ,But the style of userDataList component is ok , I check the two components ,they are just the same.

Below is the code of teemTree component:

<template>
    <div class="teem-tree">
        <div class="teem-tree-title">部门</div>
        <div class="tree">
            <el-tree
                :data="treeD"
                node-key="deptId"
                accordion default-expand-all
                :highlight-current="rowSelect"              
                :expand-on-click-node="false"
                @node-click="TreeClick"
                :props="defaultTreeProps">
            </el-tree>
        </div>
    </div>
</template>

<script>
    import {vueEle} from '../common/js/vueBus.js'
    export default {
        data() {
            return {
                rowSelect:true,
                defaultTreeProps:{
                    children:'childList',
                    label:'deptName'
                }
            }
        },
        props:['treeD'],
        methods:{
            TreeClick(data){
                if(data.deptId!=null){
                    vueEle.$emit('deptChange',data.deptId);
                    this.rowSelect=true;
                }           
            }
        },
        filters:{
            formatIndex(_val){
                return  '2-'+_val
            }
        },
        created(){
            vueEle.$on('ChangeStyle',(changevalue)=>{
                this.rowSelect=changevalue;
            })
        },
        mounted(){
            console.log(this.treeD)
        }
    }
</script>

<style  scoped>
    .teem-tree{
        border-radius: 4px;
    }
    .teem-tree-title{
        padding: 0 15px;
        line-height: 30px;
        background-color: #5f9b69;
        color: #fff;
    }
</style>

the webpack config is below:


 module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            css: ExtractTextPlugin.extract({
                use: loaders,
                fallback: ['vue-style-loade']
             })}
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')],
        query: {
          presets: ['es2015']
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'file-loader',
        query: {
          limit: 8000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader?limit=10000&name=static/fonts/[name].[ext]',//?limit=10000&'+ urlname
//      query: {
//        limit: 8000,
//        name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
//      }
      }
    ]
gangsthub commented 6 years ago

I think you have a typo in webpack.config.js:

fallback: ['vue-style-loade']

shouldn't it be vue-style-loader?