通過 sass-resources-loader 全局注冊 Sass/Less 變量

使用webpack引入sass/less全局變量

sass或者less都提供變量設置，在需求切換主題的項目中使用less或者sass變量，只要修改變量值，編譯后所有用到該變量的樣式都會被修改為你想要的效果，但是在vue-cli搭建的項目中，在main.js中全局引入一個scss文件，在其中定義變量在其他組件或者頁面中引用報變量未定義錯誤，其他的樣式可以正常顯示，顯然是編譯的問題。

傻瓜式引用

       在每個用到全局變量的組件都引入該全局樣式文件

@import 'path/fileName.scss'

但是組件或者頁面不在統一層目錄下，引入的路徑可能也會有差異，所以還是看看 sass-resources-loader 的解決方法吧。

 

安裝sass-resources-loader

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

修改sass配置

 

// 全局文件引入 當然只想編譯一個文件的話可以省去這個函數
function resolveResource(name) {
  return path.resolve(__dirname, '../static/style/' + name);
}
function generateSassResourceLoader() {
  var loaders = [
    cssLoader,
    'sass-loader',
    {
      loader: 'sass-resources-loader',
      options: {
        // 多個文件時用數組的形式傳入，單個文件時可以直接使用 path.resolve(__dirname, '../static/style/common.scss'
        resources: [resolveResource('common.scss')]  
      }
    }
    ];
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

修改sass配置的調用為 generateSassResourceLoader()

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    // vue-cli默認sass配置
    // sass: generateLoaders('sass', { indentedSyntax: true }), 
    // scss: generateLoaders('sass'),
    // 新引入的sass-resources-loader
    sass: generateSassResourceLoader(),
    scss: generateSassResourceLoader(),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

 

在 main.js 中引用 common.scss 文件，重啟服務，其中定義的變量在其他組件就可以使用了。

 

以上的方法都來自網上的資料，如果您的項目恰巧有如上的配置，那么恭喜您，您的問題已經完美解決。如果您的項目里沒有類似的配置結構，那么也恭喜你，你的問題即將解決

/* Webpack@2: webpack.config.js */
 
module: {
  rules: [
    // Apply loader
    {
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader',
        'sass-loader',
        {
          loader: 'sass-resources-loader',
          options: {
            // Provide path to the file with resources
            resources: './path/to/resources.scss',
 
            // Or array of paths
            resources: ['./path/to/vars.scss', './path/to/mixins.scss']
          },
        },
      ],
    },
  ],
},
 
/* Webpack@1: webpack.config.js */
 
module: {
  loaders: [
    // Apply loader
    { test: /\.scss$/, loader: 'style!css!sass!sass-resources' },
  ],
},
 
// Provide path to the file with resources
sassResources: './path/to/resources.scss',
 
// Or array of paths
sassResources: ['./path/to/vars.scss', './path/to/mixins.scss'],

Example of Webpack 4 Config for Vue

module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          { loader: 'vue-style-loader' },
          { loader: 'css-loader', options: { sourceMap: true } },
        ]
      },
      {
        test: /\.scss$/,
        use: [
          { loader: 'vue-style-loader' },
          { loader: 'css-loader', options: { sourceMap: true } },
          { loader: 'sass-loader', options: { sourceMap: true } },
          { loader: 'sass-resources-loader',
            options: {
              sourceMap: true,
              resources: [
                resolveFromRootDir('src/styles/variables.scss'),
              ]
            }
          }
        ]
      }
    ]
  }

VueJS webpack template(vue-cli@2)

If you wish to use this loader in the VueJS Webpack template you need to add the following code in build/utils.js after line 42 :

if (loader === 'sass') {
  loaders.push({
    loader: 'sass-resources-loader',
    options: {
      resources: 'path/to/your/file.scss',
    },
  });
}

VueJS webpack template(vue-cli@3)

If you are using vue-cli@3, you need create a vue.config.js file in your project root(next to package.json). Then, add the following code :

// vue.config.js
module.exports = {
  chainWebpack: config => {
    const oneOfsMap = config.module.rule('scss').oneOfs.store
    oneOfsMap.forEach(item => {
      item
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          // Provide path to the file with resources
          resources: './path/to/resources.scss',
 
          // Or array of paths
          resources: ['./path/to/vars.scss', './path/to/mixins.scss']
        })
        .end()
    })
  }
}

完活。