引入loader
cnpm install node-sass --save-devcnpm install sass-loader --save-devcnpm install style-loader --save-dev
scss支持
為了使用scss，我們需要先安裝相關的node包：
npm install --save style-loader sass-loader node-sass file-loader
安裝好之后，為了可以在.vue和.scss中使用，需要在webpack.config.js中配置對應的解析器：
var webpack = require('webpack');module.exports = { entry: ['./src/entry.js'], output: { path: __dirname, filename: 'build/main.js' }, resolve: { alias: { 'vue': 'vue/dist/vue.js' } }, module: { loaders: [{ test: //.vue$/, loader: 'vue-loader', options: { loaders: { scss: 'style-loader!css-loader!sass-loader' } } }, { test: //.js$/, loader: 'babel-loader', exclude: /node_modules/ },{ test: //.css$/, loader: ['style-loader', 'css-loader'] }, { test: //.scss$/, loader: ['style-loader', 'css-loader', 'sass-loader'] }, { test: //.(png|jpg|jpeg|gif|bmp)$/, loader: ['file-loader?limit=7000&name=build/assets/[name].[ext]'] } ] }};關于上面resolve的配置，是因為編譯和打包源文件默認不一樣。
測試scss
打開PageTwo.vue測試一下：
<style lang="scss" scoped>section { & > div { font-size: 20px; }}</style>編譯正常。
本篇最終項目文件Github地址：github.com/yelloxing/vue.quick/tree/V6
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
