- 安装sass的依赖包
cnpm install node-sass --save-dev //安装node-sass
cnpm install sass-loader --save-dev //安装sass-loader
cnpm install style-loader --save-dev //安装style-loader 有些人安装的是 vue-style-loader 其实是一样的!
汇总:
$ cnpm install sass-loader node-sass vue-style-loader --D
注:有时因为网络原因,安装起来比较慢,这里推荐的和大家的一样,使用淘宝的,可以临时用一下淘宝的镜像,不用非得将默认的镜像源更新为淘宝的
npm install -g cnpm --registry=https://registry.npm.taobao.org (安装淘宝镜像)用淘宝镜像快!而且安装的时候减少出错!
或者
$ npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass
–registry=https://registry.npm.taobao.org 淘宝
npm
包镜像
–disturl=https://npm.taobao.org/dist 淘宝node
源码镜像,一些二进制包编译时用
–sass-binary-site=http://npm.taobao.org/mirrors/node-sass 这个才是node-sass
镜像
注:若安装出现如下错误:Couldn't find preset "es2015" relative to directory
则:配置一下Sass
解析器
在webpack.base.conf.js
中,modules
结节下的loaders
结节中添加es2015
的支持,如下所示:
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['es2015']
}
}
],
}
- 与less一样 是在
webpack.base.conf.js
中,modules
结节下的rules
节点中添加sass
的解析器,如下所示:
module: {
rules: [
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
]
}
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
{ //从这一段上面是默认的!不用改!下面是没有的需要你手动添加,相当于是编译识别sass!
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]
}
- 在需要用到
sass
的地方添加lang=scss
<style lang="scss" scoped="" type="text/css">
//你的sass语言
$primary-color: #333;
body {
color: $primary-color; //编译后就成了 color:#333;类似于js的变量!
}
</style>
最后:$ npm run dev