• home > webfront > style > sass >

    SASS/SCSS全局变量及样式在webpack项目应用,vue-cli的配置如何?

    Author:zhoulujun Date:

    sass的全局变量,在react和在vue中,不可能每个文件里面写一个。所以需要全局全局样式与全局变量的问题。sass-loader提供了additionalData,但是vue-cli坑爹,官方文档不信,需要改为prependData

    我们习惯上偏向于sass写样式。sass的全局变量,在react和在vue中,不可能每个文件里面写一个。所以需要全局全局样式与全局变量的问题。

    sass-loader配置

    查看sass-loader文档:

    https://www.npmjs.com/package/sass-loader

    https://github.com/webpack-contrib/sass-loader#additionaldata

    NameTypeDefaultDescription
    implementation{Object}sassSetup Sass implementation to use.
    sassOptions{Object|Function}defaults values for Sass implementationOptions for Sass.
    sourceMap{Boolean}compiler.devtoolEnables/Disables generation of source maps.
    additionalData{String|Function}undefinedPrepends/Appends Sass/SCSS code before the actual entry file.
    webpackImporter{Boolean}trueEnables/Disables the default Webpack importer.

    其中, additionalData,就可以配置全局变量

    全局SASS/SCSS变量在Vue项目中应用解决方案

    vue-cli配置sass全局变量

    首先查看官方文档:https://cli.vuejs.org/zh/guide/css.html#向预处理器-loader-传递选项

    样例配置如下

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

    但是,这个配置,陪下下来,并不认。谷歌找了下,貌似是把additionalData 修改为data

    module.exports = {
      css: {
        loaderOptions: {
          sass: {
            data: `@import "@/styles/_variables.scss";`
          }
        }
      }
    };

    这个会报错

    ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.  - options has an unknown property 'data'. These properties are valid:

    谷歌再插了下

    将data改成prependData

    // 旧

    data: `@import "@/assets/scss/_variable.scss";`

    // 新

    prependData: `@import "@/assets/scss/_variable.scss";`

    坑呀。这个还可以引入全局样式

    Vue-cli如何配置可以导入全局样式,并且在head标签中不重复引入?

    css: {
      loaderOptions: {
        // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
        // 因为 `scss` 语法在内部也是由 sass-loader 处理的
        // 但是在配置 `prependData` 选项的时候
        // `scss` 语法会要求语句结尾必须有分号,`sass` 则要求必须没有分号
        // 在这种情况下,我们可以使用 `scss` 选项,对 `scss` 语法进行单独配置
        sass: {
          prependData: `
                  //变量
                  @import "./src/assets/css/variable.scss";
                  //混入
                  @import "./src/assets/css/mixin.scss";
                  //全局样式重复引入了了
                  @import "./src/assets/css/base.scss";
              `
        }
      }

    这样就可以解决了



    转载本站文章《SASS/SCSS全局变量及样式在webpack项目应用,vue-cli的配置如何?》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/style/sass/2020_0903_8555.html