One, using save will be automatically added in package.json.
You can install node-sass through Taobao's npm mirror
$ npm install -g cnpm --registry=https://registry.npm.taobao.org (install Taobao mirror)
$ cnpm install node-sass --save (use Taobao mirror to install node-sass)
Note: If you still cannot install node-sass after installing Taobao mirror, execute the following command
1 2 3 4 5 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. Open webpack.base.config.js and add module -- rules (vue2.0) to loaders
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. If you need to use scss in the vue file style tag, you need to declare:
view2.0
1 |
< style lang="scss" scoped="" type="text/css"></ style > |