设置 Vue.js 中的 .jsx 的样式作用域 —— CSS Modules

[lbwa]

原理

CSS Modules 可起到与 #6 scoped 相同的作用，即定义样式的作用域。相关介绍点我查看。

webpack 配置

// webpack.dev.config.js

// 生成独一无二的 class / id 值
const createLocalIdentName = process.env.NODE_ENV === 'development'
  ? '[path]-[name]-[hash:base64:5]'
  : '[hash:base64:5]'

module.exports = merge(baseWebpackConfig, {
  // ...
  module: {
    rules: [{
      test: /\.scss$/,
      include: [resolve('src')],
      use: [
        'style-loader', // 将样式表写入 HTML 中
        // 'css-loader',
        {
          loader: 'css-loader',
          options: {
            // CSS modules 模拟 scoped ，此处用于定义 .jsx 的样式作用域
            // https://vue-loader.vuejs.org/zh-cn/features/css-modules.html
            modules: true,

            // 实现样式独有的命名空间（作用域）
            localIdentName: createLocalIdentName
          }
        },
        // ...
      ]
    }]
  }
  // ...
}

易错点

在以上配置完成后，若项目中有字体文件，将可能发生路径解析错误。

如下：

@font-face {
  font-family: 'fontello';
  src: url('~@/common/font/fontello.eot?81914681');
  // ...
}

此时，webpack 无法正确解析别名路径。

解决方案是将路径写为基于根目录的文件路径，原因点我:

@font-face {
  font-family: 'fontello';
  src: url('/src/common/font/fontello.eot?81914681');
  // ...
}

jsx 配置

import className from 'scss/layout-footer.scss'
// import 'scss/layout-footer.scss'

export default {
  data () {
    return {
      author: 'Bowen'
    }
  },

  render (h) {
    return (
      // <div class="layout-footer">
      // 注意：若变量有连字符，那么变量必须写成 String 类型，如 'layout-footer'
      <div class={ className['layout-footer'] }>
        <span>Written by <a href="https://github.com/lbwa" target="_blank" >{this.author}</a></span>
      </div>
    )
  }
}