reactjs – 如何使用SCSS设置react应用程序? (错误)
发布时间:2020-12-15 09:33:26 所属栏目:百科 来源:网络整理
导读:我正在尝试设置我的反应项目,所以我可以使用SCSS格式的SASS. 这是在我的webpack.config.dev.js中: { test: /.scss$/,exclude: /node_modules/,use: [ require.resolve('style-loader'),{ loader: require.resolve('css-loader'),options: { importLoaders:
我正在尝试设置我的反应项目,所以我可以使用SCSS格式的SASS.
这是在我的webpack.config.dev.js中: { test: /.scss$/,exclude: /node_modules/,use: [ require.resolve('style-loader'),{ loader: require.resolve('css-loader'),options: { importLoaders: 1,},{ loader: require.resolve('sass-loader'),} ] } 我以两种不同的方式将scss文件导入我的jsx: import './index.scss'; import css from './ModalWrapper.scss'; 当我运行应用程序时,我目前收到错误: ./src/index.scss Module build failed: body { ^ Invalid CSS after "m": expected 1 selector or at-rule,was "module.exports = __" in /pathtoapp/web/src/index.scss (line 1,column 1) 看来我,那个,反应是试图将SCSS解释为应该起作用的CSS.另外,反应认为身体不是有效的CSS.在那里,我认为CSS或SCSS都没有正确加载. 任何帮助,将不胜感激.这个问题有很多未解决的问题. 解决方法
如果您在Webpack 3上,请将其添加到module.rules
{ test: /.scss$/,loader: [ require.resolve('style-loader'),require.resolve('css-loader'),require.resolve('sass-loader'),] }, 然后添加文件加载器并确保将.scss添加到密钥排除的数组中 { loader: require.resolve('file-loader'),// Exclude `js` files to keep "css" loader working as it injects // it's runtime that would otherwise processed through "file" loader. // Also exclude `html` and `json` extensions so they get processed // by webpacks internal loaders. exclude: [/.js$/,/.html$/,/.json$/,/.scss$/,],options: { name: 'static/media/[name].[hash:8].[ext]',} 当然,请确保在package.json中有样式加载器,sass-loader,css-loader和文件加载器.在使用最新版本的create-react-app时,此代码段对我有用. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |