webpack3使用additionalData和prependData都不管用

10、css相关配置

utils.js

    sass: generateLoaders('sass', {
      indentedSyntax: true,
      implementation: require('node-sass'),
      // 由于 sass-loader 版本不同，loaderOptions 中的 additionalData 的键名也不同
      // sass-loader loader v8-， 这个选项名是 "data"，
      // sass-loader loader v8中， 这个选项名是 "prependData"，
      // sass-loader loader v10+， 这个选项名是 "additionalData"，
      data: `
        @import "@/style/settings/var.scss"
        @import "@/style/theme/index.scss"
        @import "@/style/tools/_sassMagic.scss"
        `
      // includePaths: [path.resolve(__dirname, 'src/style')]
    }),
    scss: generateLoaders('sass', {
      implementation: require('node-sass'),
      // 由于 sass-loader 版本不同，loaderOptions 中的 additionalData 的键名也不同
      // sass-loader loader v8-， 这个选项名是 "data"，
      // sass-loader loader v8中， 这个选项名是 "prependData"，
      // sass-loader loader v10+， 这个选项名是 "additionalData"，
      data: `
        @import "@/style/settings/var.scss";
        @import "@/style/theme/index.scss";
        @import "@/style/tools/_sassMagic.scss";
        `
      // includePaths: [path.resolve(__dirname, 'src/style')]
    }),

参考链接

• vue.config.js中的webpack优化及多页面应用开发配置
• https://cli.vuejs.org/zh/guide/css.html#向预处理器-loader-传递选项