将 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 配置的主要内容,如果未能解决你的问题,请参考以下文章

scss Sass mixin可轻松将视网膜图像添加到CSS属性中

如何将 id 从删除按钮传递到弹出删除按钮

为编译的 sass/scss 添加时间戳

如何将 iframe 的内容复制到弹出窗口中?

TimelineJS3 如何将日期粘贴到弹出窗口?

Vue 融入flexible.js scss(sass)文件 添加scss文件 sass