首页 > 如何用webpack提取出vue文件中的scss内容(引入了mixin文件编译报错)?

如何用webpack提取出vue文件中的scss内容(引入了mixin文件编译报错)?

本意是想一个组件对应一个样式,当然sass的@mixin非常好用,在vue<style>下引入了编写好的mixin文件,预期是应该webpack编译好了sass再生成单独css文件,实际是webpack直接把@include样式当成了字符串写入css文件。然后就会报错为mixin文件内unknown world。

配置如下:
webpack.config.js:

var ExtractTextPlugin = require('extract-text-webpack-plugin');
..
module.exports = {
    ...
    vue : {
        loaders : {
            sass : ExtractTextPlugin.extract('vue-style-loader', 'css-loader', 'sass-loader')
        }
    },
    plugins : {
         new ExtractTextPlugin("../[name].css",{
            allChunks: true,
        })
    }
}

components1.vue:

<template>..</template>
<script>..</script>
<style lang="sass">
@improt "../../scss/mixin.scss";
.example {
    @include Example(param1,param2);
}
【热门文章】
【热门文章】