create-react-app 配置全局的less/scss

项目中有全局的less、scss文件时，咱们的模块使用时，须要引入才能使用，有没有办法只引入一次，或者把它配置在webpack里呢？这篇文章讲到的就是create-react-app（16.8.X）版本的使用方法。sass-resources-loader和style-resources-loader，这两个模块。如下是配置方法

1.使用的版本

• react：16.8.6

• webpack：4.29.6

2.先安装style-resources-loader和sass-resources-loader，找到 config文件下的webpack.config.js（npm run eject）

    2.1 sass-resources-loaders使用方法，直接贴代码。

    

{
	test: sassRegex,
	exclude: sassModuleRegex,
	use: getStyleLoaders(
		{
			importLoaders: 3,
			modules: true, // css-module
			localIdentName: "[name]-[local]-[hash:base64:5]", // css-module hash
			sourceMap: isEnvProduction && shouldUseSourceMap // 是否map
		},
		"sass-loader"
	).concat({
		// 全局的 样式不须要每次 @import
		loader: "sass-resources-loader",
		options: {
			resources: [path.resolve(__dirname, "../src/common/common.scss")]
		}
	}),
	sideEffects: true
},

    注：路径必定要是绝对路径

  2.2 style-resources-loader的使用方法和scss大体同样的，只是参数不一样，意思不懂的查一下，附上代码

    

{
	test: lessRegex,
	exclude: /node_modules/,
	use: getStyleLoaders(
		{
			// javascriptEnabled: true,
			importLoaders: 2,
			modules: true,
			localIdentName: "[name]-[local]-[hash:base64:5]",
			sourceMap: isEnvProduction && shouldUseSourceMap
		},
		"less-loader"
	).concat({
		loader: require.resolve("style-resources-loader"),
		options: {
			patterns: [path.resolve(__dirname, "../src/common/common.less")]
		}
	}),
	sideEffects: true
},

    注：路径一样是绝对路径，patterns的值是 “string” 、[ "string" ]

以上就是less/scss 在webpack中引入全局变量的方法，我在选择附上图片和代码时纠结了一下子，我要把图片换成代码，方便大家Ctrl+C、Ctrl+V哈哈...,仍是但愿大家查阅一下资料，掌握知识，欢迎小伙伴来学习、交流、留言。