vue實作引用less，sass全局變量

1、npm install sass-resources-loader --save-dev；

2、build/utils.js中，在

function generateLoaders (loader, loaderOptions){}

     上面或者下面添加以下代碼

function resolveResource(name) {

      return path.resolve(__dirname, '../src/assets/css/' + name);

  }

  function generateSassResourceLoader() {

      var loaders = [

        cssLoader, 

        // 'postcss-loader',

        'less-loader',

        {

            loader: 'sass-resources-loader',

            options: {

              // it need a absolute path

              resources: [resolveResource('basic.less')]

            }

        }

      ];

      if (options.extract) {

        return ExtractTextPlugin.extract({

          use: loaders,

          fallback: 'vue-style-loader'

        })

      } else {

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

      }

  }

    其中resolveResource中的‘../src/assets/css’換成自己的less/sass檔案的路徑，generateSassResourceLoader中

    resources:[resolveResource('basic.less')]的basic.less換成自己的less/sass檔案名；（注意：如果是sass，則

var loaders = [

        cssLoader, 

        // 'postcss-loader',

        'less-loader',  

        {

            loader: 'sass-resources-loader',

            options: {

              // it need a absolute path

              resources: [resolveResource('basic.less')]

            }

        }

      ];

  中的‘less-loader’需要改為 'sass-loader'）;

3、build/utils.js中，把

return {

    css: generateLoaders(),

    postcss: generateLoaders(),

    less: generateLoaders('less'),

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

    scss: generateLoaders('sass'),

    stylus: generateLoaders('stylus'),

    styl: generateLoaders('stylus')

less: generateLoaders('less') 替換成 less: generateSassResourceLoaer()

4、npm run dev,然後就完成了。

--------------------- 

作者：summer_雪 

來源：CSDN 

原文：https://blog.csdn.net/u014292161/article/details/79193381 

版權聲明：本文為部落客原創文章，轉載請附上博文連結！