vue设置全局样式变量 less

1.第一步：

npm install sass-resources-loader --save-dev

2.然后在build 的utils.js中exports.cssLoaders = function (options) {}中加上一下代码：

function lessResourceLoader() {

        var loaders = [

            cssLoader,

            'less-loader',

            {

                loader: 'sass-resources-loader',

                options: {

                    resources: [

                        path.resolve(__dirname, '../src/assets/styles/common.less'),

                    ]

                }

                        }

        ];

        if (options.extract) {

            return ExtractTextPlugin.extract({

                use: loaders,

                fallback: 'vue-style-loader'

            })

        } else {

            return ['vue-style-loader'].concat(loaders)

        }

    }

path.resolve(__dirname, '../src/style/style.less')路径改成自己对应的文件
然后后面将 return{} 块中的 less: generateLoaders('less') 替换成上面自定义的函数 less: lessResourceLoader()

结果如下

exports.cssLoaders = function (options) {

  options = options || {}

  const cssLoader = {

    loader: 'css-loader',

    options: {

      sourceMap: options.sourceMap

    }

  }

  var postcssLoader = {

    loader: 'postcss-loader',

    options: {

      sourceMap: options.sourceMap

    }

  }

  function lessResourceLoader() {

    var loaders = [

      cssLoader,

      'less-loader',

      {

        loader: 'sass-resources-loader',

        options: {

          resources: [

            path.resolve(__dirname, '../src/style/style.less'),

          ]

        }

      }

    ];

    if (options.extract) {

      return ExtractTextPlugin.extract({

        use: loaders,

        fallback: 'vue-style-loader'

      })

    } else {

      return ['vue-style-loader'].concat(loaders)

    }

  }

  // generate loader string to be used with extract text plugin

  function generateLoaders (loader, loaderOptions) {

    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

    if (loader) {

      loaders.push({

        loader: loader + '-loader',

        options: Object.assign({}, loaderOptions, {

          sourceMap: options.sourceMap

        })

      })

    }

    // Extract CSS when that option is specified

    // (which is the case during production build)

    if (options.extract) {

      return ExtractTextPlugin.extract({

        use: loaders,

        fallback: 'vue-style-loader'

      })

    } else {

      return ['vue-style-loader'].concat(loaders)

    }

  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html

  return {

    css: generateLoaders(),

    postcss: generateLoaders(),

    less: lessResourceLoader('less'),

    sass: generateLoaders('sass', { indentedSyntax: true }),

    scss: generateLoaders('sass'),

    stylus: generateLoaders('stylus'),

    styl: generateLoaders('stylus')

  }

}

修改完配置文件记得重启服务器：npm run dev
ok, style.less如下:

修改完配置文件记得重启服务器：npm run dev
ok, style.less如下:

@sidebar:240px;

@headerHeight:65px;

@bodyMinWidth: 700px;

注意，赋值不是等号
在组件中，就可以使用全局变量了。

  .content {

    background:red;

    height:auto;

    margin-left: @sidebar;

    width: calc(100%-@sidebar);

  }

</style>

好用！贼好用。