我想.scss在使用create-react-app创建的应用程序中添加支持。
.scss
我确实弹出npm run eject并安装了必要的依赖项:npm install sass-loader node-sass --save-dev
npm run eject
npm install sass-loader node-sass --save-dev
在内部,config/webpack.config.dev.js我将此片段添加到了加载器中:
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?
create-react-app
好的,我找到了解决方案-与此不同:
对此:
{ test: /\.scss$/, loaders: ['style', 'css', 'sass'] },
现在我的.scss文件正在加载!