码迷,mamicode.com
首页 > Web开发 > 详细

「Vue」vue-cli 3.0集成sass/scss到vue项目

时间:2019-03-03 22:19:06      阅读:517      评论:0      收藏:0      [点我收藏+]

标签:集成   通过   webp   移动   red   process   require   color   预处理   

vue-cli 3提供了两种方式集成sass/scss:

创建项目是选择预处理器sass
手动安装sass-loader
创建项目选择预处理器sass
$ 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 Testing
移动上下键在CSS Pre-processors,按提示点击空格键选择CSS-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
使用
至此我们只需要在style指定lang为scss即可:

<style lang="scss">
$color = red;
</style>
vue service clie会自动使用我们安装的sass-loader作为scss内容的加载器。

vue cli是基于webpack构建项目,如果想对sass-loader传递一些配置项,可以在vue.config.js配置。在项目的根目录下如果没有找到vue.config.js,手动创建即可。如下:

// vue.config.js
const fs = require(‘fs‘)
module.exports = {
css: {
loaderOptions: {
sass: {
data: fs.readFileSync(‘src/variables.scss‘, ‘utf-8‘)
}
}
}
}
这个文件variables.scss也是可以通过import在.vue组件里引入。

「Vue」vue-cli 3.0集成sass/scss到vue项目

标签:集成   通过   webp   移动   red   process   require   color   预处理   

原文地址:https://www.cnblogs.com/wrxblog/p/10467957.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!