打开终端，新版本react脚手架没有集成sass了，所以要自己安装依赖,css module已经集成，直接启用就行，不用使用依赖。
npm i node-sass sass-loader --save-dev
下一步改一下，有两种操作:
一种是去node_modules中找到react_scripts 文件->config文件夹->修改webpack.config.dev.js跟webpack.config.prod.js,
另外一种在npm run eject 生成配置文件的副本，直接修改根目录下的config目录的两个文件也是webpack.config.dev.js跟webpack.config.prod.js,
–修改webpack.config.dev.js
修改了原先css的loader配置，以及增加了include跟exclude参数,位于src/styles目录下的css跟scss文件是全局样式，其他目录的scss跟css文件是局部样式
{
test: /\.s?css$/,
include: [/node_modules/, path.resolve(__dirname, '../src/styles')],
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',
}),
],
},
},
{
loader: require.resolve('sass-loader')
}
],
},
{
test: /\.s?css$/,
include: [/node_modules/, path.resolve(__dirname, '../src/styles')],
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
localIdentName: "[name]__[local]___[hash:base64:5]"
},
},
{
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')
}
],
},--修改webpack.config.prod.js,同理
{
test: /\.s?css$/,
include: [/node_modules/, path.resolve(__dirname, '../src/styles')],
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: shouldUseSourceMap
},
},
{
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')
}
],
},
extractTextPluginOptions
)
),
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
{
test: /\.s?css$/,
exclude: [/node_modules/, path.resolve(__dirname, '../src/styles')],
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: shouldUseSourceMap,
modules: 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',
}),
],
},
},
{
loader: require.resolve('sass-loader')
}
],
},
extractTextPluginOptions
)
),
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦