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