在vue-cli + webpack 项目中使用sass

1、准备工作：

由于npm的服务器在国外，网速慢而且安装容易失败，建议在安装之前，先安装国内的镜像，比如淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

 

2、安装vue-cli

全局安装 vue-cli
cnpm install vue-cli -g

 

3、创建项目

vue init webpack vue-Project    //初始化基于webpack模板项目
cd vue-Project
cnpm install  //安装依赖
cnpm run dev //运行项目

 

4、在webpcak中配置sass

安装sass-loader, node-sass.因为sass-loader依赖于sass-loader

cnpm install sass-loader node-sass --save

下载安装完vue-cli和webpcak之后，webpack是没有配置sass-loader的,

需要手动配置一下，在build 目录下的 文件webpack.base.conf.js 下的module规则下配置：


{
　　test: /\.scss$/,
　　include: '/src/',
　　loaders: ['style-loader', 'css-loader', 'sass-loader']
}

 

 5、在单文件组件中引用

<style scoped lang="scss">
    ....

</style>

 

6、重新运行项目, 如果没有编译出错，说明配置成功

npm run dev