本意是想一个组件对应一个样式,当然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);
}