我想.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: [
// 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';
我收到一个错误:
未捕获的错误:找不到模块“./assets/app.scss”
所以我的配置一定是错误的,因为我无法加载.scss
文件。如何调整配置以.scss
在弹出时加载文件create-react-app
?