Я хочу добавить поддержку .scss
в мое приложение, которое было создано с помощью create-реагировать-приложение.
Я извлек 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: не удается найти модуль "./assets/app.scss"
Так что мой конфиг должен быть неправильным, так как я не могу загрузить файлы .scss
. Как настроить config для загрузки файлов .scss
в извлеченный create-react-app
?