首页 > 代码片段 > 前端

vue-cli3全局载入scss变量或less变量配置

时间:2019-11-11|浏览次数:649次

scss

编辑 vue.config.js文件

module.exports = {

  // ...
  
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/variables.scss";`
        //新版 prependData: `@import "~@/styles/variables.scss";`
      }
    }
  },
  
  // ...
  
}

注意:

新版的sass-loader使用

prependData: `@import "~@/styles/variables.scss";`

less

安装开发依赖

npm install --save-dev style-resources-loader
npm install --save-dev vue-cli-plugin-style-resources-loader

编辑 vue.config.js文件

const path = require("path");

// ...

module.exports = {

  // ...
  
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [path.resolve(__dirname, "./src/styles/variables.less")]
    }
  },
  
  // ...
  
}