德阳做网站公司,优秀企业网站模板下载,ftp做网站,六年级做的网站的软件尝鲜使用vue-cli 3.0.0-beta.6#xff0c;很容易就可以完成scss到vue项目中。
vue-cli 3提供了两种方式集成sass/scss#xff1a;
创建项目是选择预处理器sass 手动安装sass-loader 创建项目选择预处理器sass $ vue create vuedemo ? Please pick a preset: (Use arrow ke…尝鲜使用vue-cli 3.0.0-beta.6很容易就可以完成scss到vue项目中。
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 to select, to t oggle all, 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。
# Sass
npm install -D sass-loader sass# Less
npm install -D less-loader less# Stylus
npm install -D stylus-loader stylus
使用 至此我们只需要在style指定lang为scss即可
style langscss
$color red;
/stylevue 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组件里引入。
