美文网首页
在vue-cli中安装scss,且可以全局引入scss的步骤

在vue-cli中安装scss,且可以全局引入scss的步骤

作者: 独行侠_ef93 | 来源:发表于2019-01-31 16:37 被阅读0次

    在写vue的css样式时,觉得需要css预处理器让自己的css更加简洁、适应性更强、可读性更佳,更易于代码的维护,于是在vue-cli脚手架采用scss。写过的人都知道,每写一个.vue文件都要在style上面@import global.scss文件的话,这样很麻烦。css文件可以在main.js中可以直接import,而scss文件import会报错,因此记录下处理的方法。

    步骤一: 安装node-sass、sass-loader、style-loader

    cnpminstallnode-sass--save-devcnpminstallsass-loader--save-devcnpminstallstyle-loader--save-dev   

    步骤二: 安装sass-resources-loader

    cnpminstallsass-resources-loader--save-dev

    步骤三: 修改build中的utils.js

    scss:generateLoaders('sass')    修改成:

        scss: generateLoaders('sass').concat(

          {

            loader: 'sass-resources-loader',

            options: {

              resources: path.resolve(__dirname, '../src/assets/global.scss')

            }

          }

        )

    可知,我是在assets中创建了一个global.scss文件。

    最后,在组件中的style标签添加lang="scss",就OK了。

    附上scss基础教程: https://www.sass.hk/guide/

    相关文章

      网友评论

          本文标题:在vue-cli中安装scss,且可以全局引入scss的步骤

          本文链接:https://www.haomeiwen.com/subject/kaflsqtx.html