猿记录

一个记录、分享的博客

您的位置:主页 > 技术专栏 > javascript > vue >

vue2.0 中使用sass 、flexble、 px2rem的的配置

2017-10-10 14:38:18 作者:yxl 次阅读 vue

一、先安装scss需要用到的loader
1、首先要使用sass
npm install node-sass --save-dev
npm install sass-loader --save-dev

2.进入webpack.base.config.js 配置scss   module -- loaders (vue1.0)

$ npm install --save-dev sass-loader style-loader css-loader

1
2
3
4
5
6
7
8
9
{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
        'scss': 'style-loader!css-loader!sass-loader'
      }
    }
  }

打开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的话,需要声明一下:

vue1.0

1
<style rel="stylesheet/scss" lang="scss"></style>

vue2.0

1
<style lang="scss" scoped="" type="text/css"></style>
 

二、引入flexble.js
三、vue-cli 配置下的build文件夹中找到vue-loader.conf.js,然后在最后添加
postcss: [require('postcss-px2rem')({remUnit: 34.5})] ,首先先安装有postcss-px2rem这个插件
然后就可以在直接使用px作为单位了,编译后,px会自动转化我rem


凡本站注明“本站”或“投稿”的所有文章,版权均属于本站或投稿人,未经本站授权不得转载、摘编或利用其它方式使用上述作品。

编辑:yxl 关键词: vue2.0
0

网友评论