1. 程式人生 > >vue實現引用less,sass全域性變數

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 
版權宣告:本文為博主原創文章,轉載請附上博文連結!