课时-18.md

课时 18：设置全局样式

在书写 css 时，我们会将常用到的函数/变量等封装成一个 global.less/scss，然后在我们用到的时候将其引入。显然每次都要手动引入变得很麻烦，也容易出错（尤其组内来新人的时候），所以我们想如果把 global 自动引入到文件中不就完美了吗？

我们需要一个 style-resources-loader 来帮助我们完成这件事

配置 style-resources-loader

config/styleResourceLoader.js

module.exports = ({ config, options }) => {
  const resourcesOpt = options.resources;
  return () => {
    ["normal"].forEach(oneOf => {
      Object.keys(resourcesOpt).forEach(loader => {
        config.module
          .rule(loader)
          .oneOf(oneOf)
          .use("style-resources-loader")
          .loader("style-resources-loader")
          .options({
            patterns: resourcesOpt[loader].patterns
          });
      });
    });
  };
};

config/style.js

if (loader) {
  let resolvedLoader;
  try {
    resolvedLoader = require.resolve(loader);
  } catch (error) {
    resolvedLoader = loader;
  }
  rule
    .use(loader)
    .loader(resolvedLoader)
    // options 是对应 config 中的 css 参数，可以自行配置对应loader的参数
    .options(Object.assign({ sourceMap }, options));
}

项目配置

box.config.js

{
  "css": {
    "sourceMap": true,  // 是否开启css source map
    "loaderOptions": { // 配置loader的options
      "css": {},
      "less": {
        "globalVars": {
          "gray": "#ccc"
        }
      },
      "sass": {},
      "postcss": {},
      "stylus": {}
    },
    "isCssModule": false, // 是否对css进行模块化处理
    "needInlineMinification": false // 是否需要压缩css
  },
  "resources": {
    "less": {
      "patterns": [path.resolve(__dirname, "./src/global/*.less")]
    },
    "scss": {
      "patterns": [path.resolve(__dirname, "./src/global/*.scss")]
    }
  }
}

使用

└──── src
   │── global
   │  │── index.less
   │  └── index.scss
   └── style
      └── index.less

设置全局样式

global/index.less

.g-less-height () {
  height: 100%;
}

.g-less-test {
  width: 100%;
}

使用全局样式

style/index.less

.test {
  width: 300px;
  color: @gray;
  .g-less-height();
}

style/index.scss

.g-scss-test {
  width: 100%;
}

编译后

dist/css/index.css

.g-less-test {
  width: 100%;
}

.test {
  color: #ccc;
  width: 100%;
  height: 100%;
}

.g-scss-test {
  width: 100%;
}

可见全局的样式都被打包进 dist/css/index.css 中了，我们再也不用每次都手动引入了