使用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() 
    }) 
  } 
}

完活。


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

require.ensure的用法;异步加载-代码分割;知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。