vue-cli3.0 + sass/scss项目

vue-cli3.0 + sass/scss项目

第一种

创建项目是选择预处理器sass
手动安装 sass-loader

$ vue create vuedemo
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
Manually select features

移动选择“Manually select features” ：表示手动选择创建项目的特性

? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
>( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
(*) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testin

选择CSS Pre-processors

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> SCSS/SASS
LESS
Stylus

选择第一个SCSS/SASS作为我们的css预处理器
完成后会自动帮我们安装sass-loader node-sass

第二种

如果我们再创建项目的时候，没有选择css预处理器，这样我们可以手动安装sass-loader node-sass 来集成scss

npm install -D sass-loader node-sass

之后创建一个全局变量文件global.scss

$c-bg: #FF3259;
$c-text-w: #ffffff;
$c-text-E: #ECECEC;
$c-content-w: 1205PX;
$c-content-m: 375px;

之后在config.js(没有的话手动创建)中添加这个

// vue.config.js
const path = require('path')
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // 根据自己样式文件的位置调整
        data: `@import "@/styles/global.scss";`
      }
    }
  }
}

在项目中使用

<template>
  <div class="about">
    <div class="demo"></div>
  </div>
</template>
<style scoped lang=scss>
.demo {
  width: $c-content-m;
  height: $c-content-m;
  background: $c-bg;
}
</style>