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

尝鲜使用vue-cli 3.0.0-beta.6,很容易就可以完成scss到vue项目中。

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

  1. 创建项目是选择预处理器sass
  2. 手动安装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传递参数可以分为两种方式:params参数query参数params参数params参数传递方式分两种:路由配置参数使用$router的push编程式添加路由配置参数在路由中配置如下:{   path: '/user/:id',   name: 'user',   component: UserDe

基于webpack的vue项目使用别名避免../深路径

在vue的项目里,我们可以使用../这样的相对路径的方式引用不同目录的组件:import userinfo from '../../../components/userinfo.vue'; 使用../引用的路径比较深,定位路径和书写不方便,并且不直观。由于项目是基于webpack,比较好的做法是使用webpack对路径定义一个别名。在webpack.base.config.js找到resolve节

Vue实例里this的使用

要理解Vue实例里this的使用,首先要理解this在JavaScript里的用法,可以参考理解JavaScript普通函数以及箭头函数里使用的this。这是vue文档里的原话:All lifecycle hooks are called with their 'this' context pointing 

使用webpack构建vue项目

简单记录下使用webpack构建vue项目。环境依赖1、安装vueyarn add vue 2、安装webpack相关开发包yarn add webpack babel-core babel-loader babel-preset-env --dev 3、安装vue-loader和vue-template-compil

Angular CLI在Angular项目里使用scss

Angular CLI支持多种css预处理,包括:cssscsslesssassstyl (stylus)默认值为css。Angular有两种方式指定css预处理。下面以scss为例:新建项目指定css预处理在新建angular项目是使用--style指定css预处理ng new my-project --style=scss 已有项目指定css预

[译]Vue - 解决Cannot Find Element错误

如果你刚接触Vue,可能会遇到一些不熟悉的错误。实际上,我在创建delimiter app时看到了一个我不太熟悉的错误。例如,你可能在Vue里看到“Cannot find element”的错误。在Google Chrome中,你会在控制台窗口中看到此错误,如下所示:发生这种错误是因为过早实例化Vue。通常情况下,你会看到此错误,是因为挂载Vue的HTML元