Wie füge ich eine CSS-Konfiguration in reactjs Project hinzu?

Question

Ich habe die webpackconfig geschrieben, aber CSS scheint nicht richtig zu funktionieren und es ist werfen und Fehler. Im Folgenden sind meine Dateien enthalten.

Mein webpack.config.js:

import '../assets/css/style.css'; 

Package.json:

{ 
    ... 
    "dependencies": {... 
    }, 
    "devDependencies": { 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "babel-preset-stage-2": "^6.24.1", 
    "webpack": "^3.8.1", 
    "webpack-dev-server": "^2.9.3", 
    "css-loader": "^0.28.7", 
    "style-loader": "^0.19.0" 
    } 
} 

Answer 1

Per

module: { 
    loaders: [ 
     { 
     test: /\.js?/, 
     include: SRC_DIR, 
     loader: "babel-loader", 
     query: { 
      presets: ["react", "es2015", "stage-2"] 
     } 
     } 
     { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract("style-loader", "css-loader") 
     } 
     { 
     test: /\.less$/, 
     loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader") 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin("style.css", { 
     allChunks: true 
    }) 
    ] 
}; 

und in meinem Index.js ich als hinzugefügt haben unsere chat, das ist, was Ihre webpack.config.js Datei ist wie folgt:

var path = require("path"); 

var DIST_DIR = path.resolve(__dirname, "dist"); 
var SRC_DIR = path.resolve(__dirname, "src"); 

var config = { 
    entry: SRC_DIR + "/app/index.js", 
    output: { 
    path: DIST_DIR + "/app", 
    filename: "bundle.js", 
    publicPath: "/app/" 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js?/, 
     include: SRC_DIR, 
     loader: "babel-loader", 
     query: { 
      presets: ["react", "es2015", "stage-2"] 
     } 
     } 
     { 
     test: /\.css$/, 
     loaders: ["style-loader", "css-loader", "sass-loader"] 
     } 
     { 
     test: /\.less$/, 
     loader: ExtractTextPlugin.extract("css-loader!sass-loader") 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin("src/components/assets/css/style.css", { 
     allChunks: true 
    }) 
    ] 
}; 

module.exports = config; 

Es gibt zwei Probleme mit dieser Konfiguration.

1. Es gibt keine Kommas, die die loaders Objekte trennen.
2. Sie verwenden ExtractTextPlugin, aber nicht importiert/benötigt es irgendwo in der Konfig.

Problem # 1 ist ziemlich offensichtlich, wie man löst; fügen Sie einfach die Kommata nach jeder Definition eines Loader-Objekts hinzu.

Problem # 2 auch, müssen Sie installieren und Referenz ExtractTextPlugin in Ihrer Webpack-Konfigurationsdatei.

Sie können dies tun, indem Sie den folgenden Befehl in das Terminal:

npm install --save-dev extract-text-webpack-plugin 

Dies installiert das Plugin auf Ihre node_modules und es auch in Ihrem package.json file under the devDependencies` Objektliste.

Und dann in Ihrem webpack.config.js wo Sie Module erfordern, benötigen auch das Plugin wie folgt:

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

Nachdem diese Änderungen vorgenommen haben, sollten Sie config-Datei wie folgt aussehen:

var path = require("path"); 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); 
var DIST_DIR = path.resolve(__dirname, "dist"); 
var SRC_DIR = path.resolve(__dirname, "src"); 

var config = { 
    entry: SRC_DIR + "/app/index.js", 
    output: { 
    path: DIST_DIR + "/app", 
    filename: "bundle.js", 
    publicPath: "/app/" 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js?/, 
     include: SRC_DIR, 
     loader: "babel-loader", 
     query: { 
      presets: ["react", "es2015", "stage-2"] 
     } 
     }, 
     { 
     test: /\.css$/, 
     loaders: ["style-loader", "css-loader", "sass-loader"] 
     }, 
     { 
     test: /\.less$/, 
     loader: ExtractTextPlugin.extract("css-loader!sass-loader") 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin("src/components/assets/css/style.css", { 
     allChunks: true 
    }) 
    ] 
}; 

module.exports = config;