webpack 配置scss||less全局样式（自定义的，vue-cli2/3）

一般的，引入全局设置的基本样式

@import './base.scss';

这样在引入scss文件中可以使用base里的全局变量
但是避免在资源文件中使用SASS@ import规则，因为它会降低增量构建的速度。直接在webpack config 中的sassResources数组中添加导入的文件。
以scss为例, 在自己配的webpack,和vue-cli2/3中配置全局样式引入
（sass-resources-loader也可以用来配置less）

自己配的webpack中less||scss

确保package.json有 node-sass ，sass-loader， style-loader
安装sass-resources-loader sass-resources-loader

cnpm i sass-resources-loader -D

再在配置中更改

module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          { loader: 'vue-style-loader' },
          { loader: 'css-loader', options: { sourceMap: true } },
          { loader: 'sass-loader', options: { sourceMap: true } },
          { loader: 'sass-resources-loader',
            options: {
              sourceMap: true,
              resources:[path.resolve(__dirname, '../src/renderer/globals.scss'),]//一定是path.resolve的绝对路径
            }
          }
        ]
      },
}

vue-cli2中scss

安装sass-resources-loader
修改build中的utils.js

scss: generateLoaders('sass'),
//修改为
scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
        //scss全局文件的路径
      resources: path.resolve(__dirname, '../src/renderer/globals.scss')
    }
  }
),

vue-cli2中less

安装sass-resources-loader
修改build中的utils.js

less: generateLoaders('less')
//修改为
 less: generateLoaders('less').concat({
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve(__dirname, '../src/components/libs/css/skin.less')
      }
    }),

vue-cli3中scss

vue.config.js
不需要安装sass-resources-loader
只需要确保安装了node-sass sass-loader

module.exports = {
 css: {
        loaderOptions: {
//less: {
     //   resources: [path.resolve(__dirname, "@/assets/css/common.less")]
//}
            sass: {
                data: `
                  @import "@/src/renderer/globals.scss";
                   @import "@/src/renderer/base.scss";
                  `
            }
        }
    },
}

有些会报错


module.exports = {
 css: {
        loaderOptions: {
            sass: {
              // data: `@import "./src/styles/main.scss";`  // 旧的写法
              prependData: `@import "./src/styles/main.scss";`  // 新的写法
            }
        }
    },
}

这样配置后在

<style lang="scss">
    .contentTitle{
        color:$color;
    }
</style>

直接使用

vue-cli3中less (方法1)

vue.config.js

cnpm i style-resources-loader -D

确保安装了node-sass sass-loader

module.exports = {
  chainWebpack: (config) => {
    ...
      const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
      types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
    },

   css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true
            },
        }
    },
}
function addStyleResource(rule) {
    rule.use('style-resource')
        .loader('style-resources-loader')
        .options({
            patterns: [
                path.resolve(__dirname, './src/style/common.less'),
            ],
        })
}

vue-cli3中less (方法2)