将 Sass (.scss) 添加到弹出的 create-react-app 配置
Posted
技术标签:
【中文标题】将 Sass (.scss) 添加到弹出的 create-react-app 配置【英文标题】:Add Sass (.scss) to ejected create-react-app config 【发布时间】:2017-03-22 01:41:03 【问题描述】:我想在我的应用程序中添加.scss
支持,该应用程序是使用 create-react-app 创建的。
我确实弹出了npm run eject
并安装了必要的依赖项:npm install sass-loader node-sass --save-dev
在config/webpack.config.dev.js
里面我添加了这个sn-p的loader:
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"]
,
当我尝试导入 scss 文件时,现在在我的 jsx 中:
import './assets/app.scss';
我得到一个错误:
未捕获的错误:找不到模块“./assets/app.scss”
所以我的配置一定是错误的,因为我无法加载.scss
文件。如何调整配置以在弹出的create-react-app
中加载.scss
文件?
【问题讨论】:
【参考方案1】:好的,我找到了解决方案 - 从此更改:
test: /\.scss$/,
include: paths.appSrc,
loaders: ["style", "css", "scss"]
,
到这里:
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
,
现在我的.scss
文件正在加载!!
【讨论】:
或 test: /\.scss$/, include: path.appSrc, loaders: [ 'style-loader', 'css-loader', 'sass-loader'] ,
为我工作【参考方案2】:
你可能不得不使用
include: paths.appSrc,
启用 webpack 热重载的选项。所以你配置 sn-p 可能看起来像
test: /\.scss$/,
include: paths.appSrc,
loaders: ['style', 'css', 'sass']
,
【讨论】:
【参考方案3】:检查第一个加载器,首先它获取所有文件并排除其他加载器文件
loaders: [
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.svg$/
],
loader: 'url',
query:
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]'
,
所以添加
/\.sass$/,
/\.scss$/,
排除,似乎解决了我遇到的同样问题:D
【讨论】:
【参考方案4】:当尝试将 sass 集成到空的 react 项目中时,我使用了 article。那里提出的解决方案不起作用,并收到与主题类似的错误。
在我的情况下,用require.resolve('style-loader')
替换style-loader
有帮助:
test: /\.scss$/,
include: paths.appSrc,
loaders: [require.resolve('style-loader'), require.resolve('css-loader'), require.resolve('sass-loader')]
,
【讨论】:
【参考方案5】:检查此加载程序设置以获取最新版本。
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
【讨论】:
【参考方案6】:根据最新配置 [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
]
,
【讨论】:
不适合我。留言:Module build failed: TypeError: this.getResolve is not a function
以上是关于将 Sass (.scss) 添加到弹出的 create-react-app 配置的主要内容,如果未能解决你的问题,请参考以下文章