如果想开发移动端项目,那么适配的时候sass必不可缺,但是 npm 安装sass时候总是报错失败!
研究半天发现可以解决的方法,亲测有效
1.先换成淘宝镜像再安装
npm install -g cnpm --registry=https://registry.npm.taobao.org (安装淘宝镜像)用淘宝镜像快!而且安装的时候减少出错!
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
安装style-loader时候死活找不到git粘贴复制的问题!然后停下手中的活!专心找!果然!百度都是过时的版本方法!最后还是自己一个一个看英文菜单的介绍!然后自己试!最后才发现!从别的地方复制的内容在git 2.1.3里面要用shift+insert 进行粘贴!我rininainia!这么偏远的键!
2. 这个时候你打开build文件夹下面的webpack.base.config.js
把里面的module改成这样的
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"]
}
]
}
3.在需要用到sass的地方添加lang=scss
<style lang="scss" scoped="" type="text/css">
//你的sass语言
$primary-color: #333;
body {
color: $primary-color; //编译后就成了 color:#333;类似于js的变量!
}
</style>