React scss和less 启用模块化

最新推荐文章于 2024-08-03 09:04:23 发布

写代码的小哥哥

最新推荐文章于 2024-08-03 09:04:23 发布

阅读量1.8k

点赞数

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/qq_36249659/article/details/104276610

版权

本文介绍了如何在React项目中启用scss和less的模块化。首先，讲述了安装scss和less的相关步骤，接着详细说明了webpack配置的要点，最后展示了如何在React组件中有效使用这些模块化样式文件。

摘要由CSDN通过智能技术生成

1.安装scss

cnpm i sass-loader node-sass -D

2.webpack配置

module: {
        rules: [
            { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ },

            {
                test: /\.css$/,
                use: [
                    { loader: "style-loader" },
                    {
                        loader: "css-loader",
                        
                    }],   //打包处理css样式表的第三方loader
            },
            {
                test:/\.ttf|woff|woff2|eot|svg$/,
                use:'url-loader'
            
            },
            {
                //只为sass启用模块化 sass为自己编写的css文件 以.css结尾的为引用的css文件
                test:/\.scss$/,
                use:[
                    {loader:"style-loader"},
                    {loader:"css-loader",options:{
                        modules:{
                            localIdentName: "[path][name]-[local]-[hash:5