vue-cli(webpack)自动注入全局Sass或Less样式

在vue项目中,我们并不能像*.css一样,直接在项目入口main.js导入Sass/Less样式。那么,我们应该如何导入Sass/Less的全局样式呢。

首先,我们要找到解决问题的方向,了解其原理。我们知道整个工程项目是使用vue-cli来构建的,而vue-cli又是通过webpack对文件进行打包的。webpack读取一个单文件组件(SFC,simple file component),然后将该组件交给相应的loader对其进行编译转换。

如下图,webpack读取SFC后,会先交给vue-loader对SFC代码进行转换,如果我们SFC文件中包含Sass/Less,那么webpack也会将SFC的样式交给Sass-loader或Less-loader,进行样式转换成css代码。

vue-cli(webpack)自动注入全局Sass或Less样式_第1张图片

如果在SFC的style标签中没有导入别的Sass/Less样式,那么webpack就不会用别的样式loader进行解析。当我们在SFC中使用了别的样式,如外部样式变量,没有导入外部样式,这时候webpack打包就会报错。

那么,有没有一种机制,告诉webpack当它转换时,能不能把其他文件引入进来一起参与处理转换?

打开脚手架vue-cli的官网,找到css配置这一栏,就会发现它已经告诉我们如何在vue-cli构建的工程中导入全局样式。

vue-cli(webpack)自动注入全局Sass或Less样式_第2张图片

 在vue-cli构建的工程中,需要配置vue.config.js告诉webpack哪些文件参与转换,下面是实例代码:

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // ~@/ 是 src/ 的别名,属于webpack的知识
        // 所以这里假设你有 `src/variables.sass` 这个文件
        // 注意:在 sass-loader v8 中,这个选项名是 "prependData"
        additionalData: `@import "~@/variables.sass"`, // or @import url("~@/variables.sass")
      },
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `prependData` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号,`sass` 则要求必须没有分号
      // 在这种情况下,我们可以使用 `scss` 选项,对 `scss` 语法进行单独配置
      scss: {
        additionalData: `@import "~@/variables.scss";` // 在``内可配置多个样式,注意别少了“;”
      }
    }
  }
}

 这样配置后,所有的SFC都会在style标签内引入,不用每个文件多次手动引入外部样式,就可以愉快地使用了。

// SFC 样式

你可能感兴趣的:(前端,webpack,sass,less)