SCSS 文件在使用 Webpack 做出反应时未编译为 CSS

Posted 2023-03-06

【中文标题】SCSS 文件在使用 Webpack 做出反应时未编译为 CSS

【英文标题】：SCSS files not compiling to CSS in react using Webpack

【发布时间】：2017-12-25 05:25:42

【问题描述】：

以下是React 项目的文件夹结构和文件，它工作正常，但我无法使用extract-text-webpack-plugin 通过Webpack 添加CSS 到SCSS。让我知道我在配置上做错了什么。

文件夹结构 -

Webpack.config.js 文件 -

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin(
    template: './app/index.html',
    filename: 'index.html',
    inject: 'body'
);
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ExtractTextPluginConfig = new ExtractTextPlugin('main.css',
    allChunks: true
);

module.exports = 
    entry: './app/app.jsx',
    output: 
        path: path.resolve('dist'),
        filename: 'bundle.js'
    ,
    devtool: 'source-map',
    module: 
        loaders: [
            test: /.js$/, loader: 'babel-loader', exclude: /node_modules/,
            test: /.jsx$/, loader: 'babel-loader', exclude: /node_modules/,
            test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")
        ]
    ,
    plugins: [HtmlWebpackPluginConfig, ExtractTextPluginConfig]
;

Package.json -

  "name": "reactyarn",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": 
    "start": "webpack-dev-server --hot"
  ,
  "devDependencies": 
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^2.29.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^3.3.0",
    "webpack-dev-server": "^2.5.1"
  ,
  "dependencies": 
    "path": "^0.12.7",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  

仅供参考 -

我在控制台中没有收到任何 JS 错误，所以我相信它只是不起作用的配置。

【参考方案1】：

您似乎缺少其中一个加载器 (sass-loader)，并且在您的模块中设置它们不正确。

试试下面的例子：

module.exports = 
    entry: './app/app.jsx',
    output: 
        path: path.resolve('dist'),
        filename: 'bundle.js'
    ,
    devtool: 'source-map',
    module: 
        loaders: [
            test: /.js$/, loader: 'babel-loader', exclude: /node_modules/,
            test: /.jsx$/, loader: 'babel-loader', exclude: /node_modules/,
            test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'] // <-- this is new
        ]
    ,
    sassLoader: 
      includePaths: [path.resolve(__dirname, 'relative/path/to/scss')]
    , // <--- this is new
    plugins: [HtmlWebpackPluginConfig, ExtractTextPluginConfig]
;

通过使用 ExtractPlugin.extract，您引用了在 Webpack 2 中执行此操作的方法（使用 rules 和 use），但您的 Webpack 配置文件似乎面向 Webpack 1。

【讨论】：

我根据您的评论进行了更改，但现在我在 cmd 提示符中遇到错误 ..File - pastebin.com/5gW7eRXU Error - i.imgur.com/4jTZITW.png

在此处查看文档：github.com/webpack-contrib/sass-loader/tree/archive/webpack-1 - 另外，请确保您已通过 npm i -D node-sass 安装了 node-sass