Question

我正在尝试在我的项目中实施SCSS。我已经运行了npm命令来安装加载器＆＃34; npm install sass-loader node-sass --save-dev＆＃34;。我创建了一个scss文件。但问题是它不起作用。我尝试了多种配置，使其可运行，但没有运气。下面是我的webpack配置。请建议，

rules: [{
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',
            options: {
                cacheDirectory: true
            }
        }]

Answer 1

您是否正确配置了装载机？至少在你提供的代码中看到任何css / scss加载器？ https://github.com/webpack-contrib/sass-loader

UPDATE ::

将ExtractTextPlugin添加到您的配置中。这样做，它将条目块中的所有require（“style.css”）移动到一个单独的CSS文件中。所以你的样式不再内联到JS包中，而是在CSS包文件中分开（styles.css）https://github.com/webpack-contrib/extract-text-webpack-plugin

将以下内容包含在您的webpack.config文件中。

// webpack.config.js
import ExtractTextPlugin from 'extract-text-webpack-plugin'

 {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract({
      fallbackLoader: 'style',
      loader: [
        'css',
        'postcss',
        {
          loader: 'sass',
          query: {
            sourceMap: false,
          }
        }
      ],
    })
  }

并导入.scss文件::

import 'scss/myfile.scss'

如何实现scss的反应

1 个答案: