unknown style nesting name failed example javascript css reactjs sass webpack

javascript - style - ¿Puedo compilar sass/less/css en webpack sin requerirlos en mi JS?



webpack css loader example (1)

Resolví esto con la ayuda de @bebraw

Como lo dijo en su comentario, el paquete web creará un archivo de javascript ficticio como lo seguirá el patrón en su output.filename cuando use ExtractTextPlugin. Debido a que estaba configurando el archivo de salida de ExtractTextPlugin para que sea exactamente el mismo que el nombre en el output.filename, solo estaba generando el archivo javascript. Asegurándome de que el nombre del nombre de archivo output.filename y ExtractTextPlugin sean diferentes, pude cargar mi sass a css a la perfección.

Aquí está el ejemplo final de webpack.config.js

entry_object[build_css + "style"] = static_scss + "style.scss"; module.exports = { entry: entry_object, output: { path: ''./'', filename: ''[name]'' }, { test: //.scss$/, include: /.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css!sass") } plugins: [ new ExtractTextPlugin("[name].css") ]

Actualmente tengo algunos componentes de reacción y sass que se están construyendo con webpack con éxito. También tengo un archivo sass principal que se construye a css con una tarea truculenta.

Me gustaría tener solo que usar una de estas tecnologías, ¿es posible simplemente compilar sass a css sin un requisito asociado al sass en un archivo de entrada?

Aquí hay un ejemplo tratando de usar WebpackExtractTextPlugin

webpack.config.js

entry_object[build_css + "style.css"] = static_scss + "style.scss"; module.exports = { entry: entry_object, output: { path: ''./'', filename: ''[name]'' }, { test: //.scss$/, include: /.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css!sass") } plugins: [ new ExtractTextPlugin("[name]") ]

después de ejecutar webpack, el recurso style.css se ve así:

/******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { ...