美文网首页vue-cli3使用sass和less
vue-cli3 配置全局less 、sass 变量

vue-cli3 配置全局less 、sass 变量

作者: 一城叶秋风 | 来源:发表于2018-12-17 17:54 被阅读0次

    一、配置全局less变量
    第一步
    执行vue add style-resources-loader

     vue add style-resources-loader
    

    vue add pluginName 是vue-cli3提供的。vue add 是用yarn安装插件的, yarn源的问题有可能导致失败。如果上面安装失败的话,就分别安装 style-resources-loader 和 vue-cli-plugin-style-resources-loader(前提是已经安装过 less less-loader)

    // 没有出错的话,可以无视这里
     npm i style-resources-loader vue-cli-plugin-style-resources-loader -D 
     或 
     yarn add  style-resources-loader vue-cli-plugin-style-resources-loader -D
    

    第二步配置vue.config.js

       const path = require("path");
       module.exports = {
         ...
         pluginOptions: {
            "style-resources-loader": {
                preProcessor: "less",
                patterns: [
                  //这个是加上自己的路径,
                  //注意:试过不能使用别名路径
                  path.resolve(__dirname, "./src/assets/variable.less")
                 ]
             }
         }
         ...
        }
    

    二、配置全局sass变量
    直接配置vue.config.js

      module.exports = {
        ...
        css: {
            loaderOptions: {
                sass: {
                  // @是src的别名
                  data: `
                    @import "@/assets/variable.scss";
                  `
                }
            }
        }
        ...
      }
    

    相关文章

      网友评论

        本文标题:vue-cli3 配置全局less 、sass 变量

        本文链接:https://www.haomeiwen.com/subject/dyvckqtx.html