create-react-app 是facebook的官方腳手架，對于個人開發者和中小型公司快速創建項目非常推薦。react的CSS解決方案有很多，這里我技術選型時用 css modules 和 sass ，然后配合antd使用通用組件庫。但是create-react-app原生并不支持 css modules 和 sass ，所以需要額外配置。
配置
增加css modules和sass
使用eject暴露配置
create-react-app 默認是沒有暴露 webpack 配置的，所以需要eject一下。注意如果項目在git倉庫環境下，先提交代碼到git倉庫，否則會報錯
npm run eject
npm添加css modules和sass
npm install react-css-modules npm install sass-loader node-sass
這里安裝sass可能會遇到墻的問題報錯，所以要么使用cnpm或者使用本地代理設置，因為我有ss所以使用本地代理
// 開啟代理npm config set proxy http://127.0.0.1:1080// 安裝完sass后關閉代理npm config delete proxy
webpack配置
重點來了，我們需要給 webpack 配置上 css-modules 和 sass-loader 。但是使用 css-modules 會使 node_modules 庫里的css樣式找不到，比如后面要使用到的antd，這個時候我們需要inclube來排除影響 node_modules ，使得 css-modules 不會影響到 node_modules
修改項目中 config 目錄下的 webpack.config.dev.js 和 webpack.config.prod.js ，說明下這兩個文件，前一個是開發環境 npm start 使用，后一個是 npm run build 打包后使用
修改 webpack.config.dev.js :
大約在160行左右，找到 test: //.css$/ ，中文注釋的地方就是修改和增加的地方
{ test: [//.css$/, //.scss$/],// 這里增加SCSS的支持 exclude: [/node_modules/],// 這里去排除node_modules，防止css modules影響到node_modules use: [ require.resolve('style-loader'), { loader: require.resolve('css-loader'), options: { importLoaders: 1, modules: true, // 這里增加對css modules的支持 localIdentName: '[name]__[local]__[hash:base64:5]' //這里增加對css modules的支持 }, }, { loader: require.resolve('sass-loader'), // 這里增加sass的支持 }, { loader: require.resolve('postcss-loader'), options: { // Necessary for external CSS imports to work // https://github.com/facebookincubator/create-react-app/issues/2677 ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', }), ], }, }, ], }, // 因為上面排除了css_modules所以這里一定要再添加個排除src來識別css_modules // 其實就是復制之前沒修改前的所有，再增加一個exclude: [/src/] { test: //.css$/, exclude: [/src/], // 這里添加排除src， use: [ require.resolve('style-loader'), { loader: require.resolve('css-loader'), options: { importLoaders: 1, }, }, { loader: require.resolve('postcss-loader'), options: { // Necessary for external CSS imports to work // https://github.com/facebookincubator/create-react-app/issues/2677 ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', }), ], }, }, ], }修改 webpack.config.prod.js :
和上面修改 webpack.config.dev.js 類似
{ test: [//.css$/, //.scss$/], // 這里增加SCSS的支持 exclude: [/node_modules/], // 這里去排除node_modules loader: ExtractTextPlugin.extract( Object.assign( { fallback: { loader: require.resolve('style-loader'), options: { hmr: false, }, }, use: [ { loader: require.resolve('css-loader'), options: { importLoaders: 1, minimize: true, sourceMap: true, modules: true, // 這里添加css modules支持 }, }, { loader: require.resolve('postcss-loader'), options: { // Necessary for external CSS imports to work // https://github.com/facebookincubator/create-react-app/issues/2677 ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', }), ], }, }, { loader: require.resolve('sass-loader'), // 這里添加sass支持 } ], }, extractTextPluginOptions ) ), // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, { test: //.css$/, exclude: [/src/], // 排除src loader: ExtractTextPlugin.extract( Object.assign( { fallback: { loader: require.resolve('style-loader'), options: { hmr: false, }, }, use: [ { loader: require.resolve('css-loader'), options: { importLoaders: 1, minimize: true, sourceMap: true, }, }, { loader: require.resolve('postcss-loader'), options: { // Necessary for external CSS imports to work // https://github.com/facebookincubator/create-react-app/issues/2677 ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', }), ], }, } ], }, extractTextPluginOptions ) ), // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }安裝antd和配置
主要是安裝配置 antd 和 babel-plugin-import ，這樣可以使得 antd 按需加載樣式
npm添加antd和babel-plugin-import
npm install antdnpm install babel-plugin-import
配置babel
在項目根目錄下增加 .babelrc 文件，然后配置如下
{ "presets": [ "react-app" ], "plugins": [ "transform-runtime", [ "import", { "libraryName": "antd", "style": "css" } ] ]}大功告成
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
