我想在我的应用中添加 .scss
支持,这是使用create-react-app创建的 .
我确实弹出 npm run eject
并安装了必要的依赖项: npm install sass-loader node-sass --save-dev
里面 config/webpack.config.dev.js
我在加载器中添加了这个片段:
{
test: /\.scss$/,
include: paths.appSrc,
loaders: ["style", "css", "scss"]
},
所以loaders数组的开头现在看起来像这样:
loaders: [
// Process JS with Babel.
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: 'babel',
query: require('./babel.dev')
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use a plugin to extract that CSS to a file, but
// in development "style" loader enables hot editing of CSS.
{
test: /\.css$/,
loader: 'style!css!postcss'
},
// LOAD & COMPILE SCSS
{
test: /\.scss$/,
include: paths.appSrc,
loaders: ["style", "css", "scss"]
},
现在在我的jsx中,当我尝试导入scss文件时:
import './assets/app.scss';
我收到一个错误:
Uncaught Error: Cannot find module "./assets/app.scss"
所以我的配置一定是错的,因为我无法加载 .scss
文件 . 如何调整配置以在弹出的 create-react-app
中加载 .scss
文件?
6 回答
检查第一个加载器,首先它获取所有文件,它排除其他加载器文件
所以加
排除,似乎解决了我遇到的同样问题:D
当试图将sass集成到空反应项目时,我使用了这个article . 在那里提出的解决方案不起作用,并且收到与主题中类似的错误 . 在我的情况下用
require.resolve('style-loader')
替换style-loader
帮助:好的,我找到了解决方案 - 改变了这个:
对此:
现在我的
.scss
文件正在加载!你可能不得不使用
选项以启用webpack热重新加载 . 所以你配置片段看起来像
检查此加载程序设置以获取最新版本 .
根据最新配置[CRA]
:: webpack.config.dev.js ::