Question

我刚刚开始与webpack进行反应项目，我正在尝试编译我的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')]
};

以下是我正在使用的版本/ dev依赖项：

"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'));

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

2 个答案: