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

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