脚本宝典收集整理的这篇文章主要介绍了

Vue2学习之旅六:添加对scss的支持

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

作者:心叶
时间:2019-01-01 16:33

本篇最终项目文件Github地址:github.com/paper520/vue.quick/tree/V6

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>

编译正常。

总结

以上是脚本宝典为你收集整理的

Vue2学习之旅六:添加对scss的支持

全部内容,希望文章能够帮你解决

Vue2学习之旅六:添加对scss的支持

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过