一,使用save会在package.json中自动添加。css
能够经过淘宝的npm镜像安装node-sassvue
$ npm install -g cnpm --registry=https://registry.npm.taobao.org (安装淘宝镜像)node
$ cnpm install node-sass --save (使用淘宝镜像安装node-sass)webpack
注:安装淘宝镜像后,仍没法安装node-sass的状况,执行下列命令web
1npm 2json 3sass 4babel 5svg 6 7 8 9 |
$ 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镜像 |
2.打开webpack.base.config.js在loaders里面加上 module -- rules (vue2.0)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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', query: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.scss$/, loaders: ["style", "css", "sass"] }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] } |
3.若是须要在vue文件style标签使用scss的话,须要声明一下:
vue2.0
1 |
< style lang="scss" scoped="" type="text/css"></ style > |