在通过vue-cli安装了webpack-simple 后,就自动安装好vue-loader了,但此时若写了含有sass的.vue组件,运行npm run dev时会报错。此时,需要我们在webpack.config.js里对vue-loader进行更详细的配置,官网给出来了,当然我们只需一个scss即可,另一个sass不用管。
{ test: /.vue$/, loader: 'vue-loader', options: { loaders: { scss: 'vue-style-loader!css-loader!sass-loader' // <style lang="scss"> sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass"> } } }
然后需要安装scss: 'vue-style-loader!css-loader!sass-loader' 里的各种loader,我们通过npm install --save -dev css-loader style-loader sass-loader vue-style-loader(似乎多写了一个,无所谓了)进行安装。运行npm run dev,可能还会报错,提示缺少依赖的node-sass,那我们接着npm install --save -dev node-sass即可。此时大功告成。