使用 webpack 2 编译 sass 并导出到 css

Question

我刚刚使用 webpack 启动了一个 react 项目，我正在尝试编译我的 sass 文件并使用 webpack 导出到 css，但似乎没有任何反应。我没有收到任何错误，但我没有看到该项目的任何 .css 文件。任何建议都会很棒。

我的 webpack 配置如下：

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: './src/app.js',
    output: { path: __dirname, filename:'./dist/bundle.js' },

    module: {
        loaders: [{
            test: /.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: { presets: ['es2015', 'react'] }
        },{
            rules: [{
                test: /\.scss$/,
                use: [
                    {loader: "style-loader"},
                    {loader: "css-loader"},
                    {loader: "sass-loader"}
                ]
            }]
        }]
     },
     plugins: [new ExtractTextPlugin('../src/css/main.css')]
};

这是我正在使用的版本/开发依赖项：

"devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^2.0.0-rc.3",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "rimraf": "^2.6.0",
    "sass-loader": "^6.0.1",
    "style-loader": "^0.13.1",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
}

提前致谢！ :)

Answer 1

来自插件文档 (https://github.com/webpack-contrib/extract-text-webpack-plugin)：

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

所以似乎缺少两件事。首先是您没有在规则中添加插件，其次是您没有提及是否在入口文件中导入任何 .scss 文件或其任何导入。

一旦你做了这两件事，你就应该走上正轨了。

Answer 2

在你的 Webpack 配置文件中试试这个：

const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractSass = new ExtractTextPlugin({
    filename: "app.css"
});

module.exports = {
    entry: [
        './src.app.js'
    ],
    output: { path: __dirname, filename:'./dist/bundle.js' },
    plugins: [
        extractSass
    ],
    module: {
      loaders: [{
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: { presets: ['es2015', 'react'] }
      },{
        rules: [{
            test: /\.scss$/,
            loader: extractSass.extract({
                loader: [{
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }]
            })
        }]
    }
}

css 文件将命名为 app.css - 随意使用任何其他名称。

然后在您的src/app.js 文件中，您需要导入scss 文件。如果没有这部分，Webpack 将不会包含它。

import React from 'react';
import {render} from 'react-dom';

import 'app.scss'; // or other file which is your main scss file


render(<MyComponent />, document.getElementById('appContainer'));