vue 全局样式引用

vue全局样式使用

使用vue-cli 脚手架快速构建了机遇webpack的vue项目。在页面开发过程中，我们会写各种各样的css样式。写多了就会想到将相同的css样式变成全局的样式。比如这样的:

$color-99: #999;
$color-66: #666;
$color-ff: #fff;
$color-fb: #fbfbfb;

$color-ee: #eee;
$color-dd: #ddd;
$color-e4: #e4e4e4;
$color-layer: rgba(0, 0, 0, 0.4);
$color-4778ba: #4778ba;
$color-link: #488ff9;

很多时候我们使用Sass，因为Sass 世界上最成熟、最稳定、最强大的专业级CSS扩展语言。在使用Sass之前，我们需要使用npm安装：

npm install node-sass --save-dev
npm install sass-loader --save-dev

我们在demo写好各种公共样式后，就去考虑如何去使用它们了。

在vue页面中，我们可以在style中去手动去引入全局样式文件，即可使用到全局的一些样式，也可以直接在main.js中去引入。
页面中引入：

<style lang="scss" scoped>
  @import "../assets/scss/base/function";
  .container {
    margin-top: px2Vw(35);
  }
  .content {
    width: px2Vw(355);
    height: px2Vw(95);
    padding-top: px2Vw(5);
    margin-left: px2Vw(10);
    border-bottom: 0.5px solid #e9ecf0;
    font-size: px2Vw(14);
    &:last-child {
      border: none;
    }
      .img {
        margin-left: px2Vw(10);
        width: px2Vw(73);
        height: 73px;
        margin-right: px2Vw(10);
        float: left;
        background-size: cover;
      }
      .detail {
        float: left;
        width: px2Vw(180);
        height: 83px;
        font-size: px2Vw(12);
      }
      .buy {
        span {
          margin-top: px2Vw(20);
          font-size: px2Vw(12);
          padding: px2Vw(3) px2Vw(10);
          display: inline-block;
          background-color: pink;
          border-radius: px2Vw(20);
          color: white;
        }
      }
  }
</style>

在main.js中去引入

//main.js
import './assets/scss/common.scss'

前两种方式都是可以的，但是平时开发中我使用的是sass-resources-loader 这个插件，使用这个插件可以在vue中全局注册sass/less文件。
安装：

cnpm i sass-resources-loader --save

安装好后需要修改webpack里面的配置。在build文件下找到utils文件，找到generateLoaders方法。修改其中的一些配置(在// https://vue-loader.vuejs.org/en/configurations/extract-css.html)

// https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/scss/common.scss')
        }
      }
    ),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

修改好后重新npm run dev ,即可很方便的使用全局注册的样式了。比如下图中字体颜色、大小等等样式：