Je souhaite ajouter le support .scss
dans mon application, créée à l'aide de create-react-app.
J'ai éjecté npm run eject
et installé les dépendances nécessaires: npm install sass-loader node-sass --save-dev
Dans config/webpack.config.dev.js
, j'ai ajouté aux chargeurs cet extrait:
{
test: /\.scss$/,
include: paths.appSrc,
loaders: ["style", "css", "scss"]
},
Ainsi, le début du tableau loaders ressemble maintenant à ceci:
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"]
},
Maintenant, dans mon fichier jsx lorsque j'essaie d'importer un fichier scss:
import './assets/app.scss';
Je reçois une erreur:
Uncaught Error: Cannot find module "./assets/app.scss"
Donc, ma configuration doit être fausse car je ne suis pas capable de charger des fichiers .scss
. Comment ajuster la configuration pour charger les fichiers .scss
dans le create-react-app
éjecté?
OK, j'ai trouvé la solution - changé de ceci:
{
test: /\.scss$/,
include: paths.appSrc,
loaders: ["style", "css", "scss"]
},
pour ça:
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
},
Et maintenant, mes fichiers .scss
sont en cours de chargement!
En essayant d’intégrer sass dans un projet vide, j’ai utilisé cet article article . La solution présentée ne fonctionnait pas et recevait la même erreur que dans le sujet. Dans mon cas, remplacer style-loader
par require.resolve('style-loader')
a aidé:
{
test: /\.scss$/,
include: paths.appSrc,
loaders: [require.resolve('style-loader'), require.resolve('css-loader'), require.resolve('sass-loader')]
},
Vérifiez le premier chargeur, d’abord il récupère tous les fichiers et exclut les autres fichiers
loaders: [
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.svg$/
],
loader: 'url',
query: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]'
}
},
ajoutant ainsi
/\.sass$/,
/\.scss$/,
exclure semble avoir résolu le même problème que moi: D
Vous devez probablement utiliser
include: paths.appSrc,
option pour activer webpack hot-reload. Donc, votre extrait de configuration pourrait ressembler
{
test: /\.scss$/,
include: paths.appSrc,
loaders: ['style', 'css', 'sass']
},
Vérifiez les paramètres de ce chargeur pour les dernières versions.
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
}
selon la dernière configuration [CRA]
:: webpack.config.dev.js ::
{
test: /\.css$/,
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',
}),
],
},
},
],
},
{
test: /\.scss$/,
loaders: [
require.resolve("style-loader"), // creates style nodes from JS strings
require.resolve("css-loader"), // transl ates CSS into CommonJS
require.resolve("sass-loader") // compiles Sass to CSS
]
},