vue-cli 如何配置sass

Posted 黑暗之光

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-cli 如何配置sass相关的知识,希望对你有一定的参考价值。

第一步:安装对应的node模块

npm install node-sass --save-dev
npm install sass-loader --save-dev

第二步:在webpack.base.config.js文件中对loaders规则 进行如下配置

{
        test:/\.scss/,
        loader:["style","css","sass"]
      }

第三步:在视图或者组件中所需要的地方添加style标签如下

<style lang="scss" scoped>
 /*样式代码*/
</style>

注明:scoped是让样式只在当前组件或者视图中起作用的

以上是关于vue-cli 如何配置sass的主要内容,如果未能解决你的问题,请参考以下文章

vue-cli3使用sass全局变量(less同理)

vue-cli3使用sass全局变量(less同理)

webpack 配置scssless全局样式(自定义的,vue-cli2/3)

将 sass-resources-loader 与 vue-cli v3.x 一起使用

创建vue-cli3项目和配置

如何将 SASS 文件添加到 bootstrap-vue/webpack(vue-cli 项目)?