не Webpack2 понимание @Import заявления в моих SASS файлов (Как скомпилировать SASS с webpack2?)

Question

Using Webpack 2 и sass-loader 4,11

webpack --config webpack.config.js

Вот мой webpack.config.js

var path = require('path'); 
var sass = require("./sass/lifeleveler.scss"); 

module.exports = { 
    entry: './dist/main.js', 
    output: { 
     filename: 'lifeleveler.app.js', 
     path: path.resolve(__dirname, 'dist') 
    }, 
    watch: true, 
    watchOptions: { 
     aggregateTimeout: 300, 
     poll: 1000, 
     ignored: /node_modules/ 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.scss$/, 
       include: [ 
        path.resolve(__dirname, 'node_modules'), 
        path.resolve(__dirname, './sass') 
       ], 
       loaders: ["style-loader", "css-loader", "sass-loader"] 
      } 
     ], 
     rules: [ 
      { 
       test: /\.tsx?$/, 
       loader: 'ts-loader', 
       exclude: /node_modules/, 
      }, 
      { 
       enforce: 'pre', 
       test: /\.tsx?$/, 
       use: "source-map-loader" 
      } 
     ] 
    }, 
    sassLoader: { 
     includePaths: [path.resolve(__dirname, "./sass")] 
    }, 
    resolve: { 
     modulesDirectories: ['./sass'], 
     extensions: [".tsx", ".ts", ".js", "scss"] 
    }, 
    devtool: 'inline-source-map' 
}; 

---

Примечания, когда я попробовал это в верхней части моей конфигурации:

var css = require("!raw-loader!sass-loader!./sass/lifeleveler.scss"); 
var css = require("!css-loader!sass-loader!./sass/lifeleveler.scss"); 

получил эту ошибку:

Error: Cannot find module '!raw-loader!sass-loader!./sass/lifeleveler.scss'

Вот почему я пошел именно с этим: var sass = require("./sass/lifeleveler.scss");

---

И мой файл lifleveler.scss (from my SASS project starter kit):

@import "vendors/normalize"; // Normalize stylesheet 
@import "vendors/reset";  // Reset stylesheet 
@import "modules/base";   // Load base files 
@import "modules/defaults";  // Defaults elements 
@import "modules/inputs";  // Inputs & Selects 
@import "modules/buttons";  // Buttons 
@import "modules/layout";  // Load Layouts 
@import "modules/svg";   // Load SVG 
@import "modules/queries";  // Media Queries 

Любая, наконец, структура папок, вы видите какие-либо вопиющие проблемы?

I found this solution here, но я добавил свой ./sass путь к modulesDirectories массива и по-прежнему получаю сообщение об ошибке.

После еще рытье я нашел this Github issue and solution here, но его исправление не работает для меня тоже :(

Answer 1

я воспроизвел свой вопрос здесь и был в состоянии это исправить.

Прежде всего, вам нужно изменить конфигурационный файл в Интернете. Некоторые моменты:

1. положить YOUT scss погрузчик внутри rules опции и отдельно каждый загрузчик в объект (например, this);
2. избавиться от линии var sass = require("./sass/lifeleveler.scss"); в верхней части конфигурации. Файл должен быть вызван из вашей точки входа JS. В этом случае: dist/main.js. На этом этапе (перед чтением конфигурации) webpack не настроен на загрузку любого материала. Это вызывает ошибку, которую вы показали.
3. избавиться от sassLoader.includePaths и resolve.modulesDirectories, так как они действительны webpack 2 ключей.

Webpack 2 структура конфигурации немного отличается от Webpack 1 (вы можете проверить официальное руководство миграции here) ..

Рабочий webpack.config.js файл будет что-то вроде этого:

var path = require('path'); 


module.exports = { 
    entry: './dist/main.js', 
    output: { 
     filename: 'lifeleveler.app.js', 
     path: path.resolve(__dirname, 'dist') 
    }, 
    watch: true, 
    watchOptions: { 
     aggregateTimeout: 300, 
     poll: 1000, 
     ignored: /node_modules/ 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.scss$/, 
       include: [ 
        path.resolve(__dirname, "sass") 
       ],    
       use: [ 
        { loader: "style-loader" }, 
        { loader: "css-loader" }, 
        { loader: "sass-loader" } 
       ] 
      }, 
      { 
       test: /\.tsx?$/, 
       loader: 'ts-loader', 
       exclude: /node_modules/, 
      }, 
      { 
       enforce: 'pre', 
       test: /\.tsx?$/, 
       use: "source-map-loader" 
      } 
     ] 
    }, 
    resolve: { 
     extensions: [".tsx", ".ts", ".js", "scss"] 
    }, 
    devtool: 'inline-source-map' 
}; 

В вашем main.js теперь вам может потребоваться ваш файл с scss-файлом:

require('../sass/lifeleveler.scss'); //assuming main.js is at ./dist 

Убедитесь, что вы установили НПМ style-loader, css-loader, node-sass и sass-loader.

Теперь компилируется правильно!

Answer 2

Попробуйте эту конфигурацию вашей webpack.config.js

... 
module: { 
    rules: [ 
    { 
     test: /.s?css$/, 
     use: ExtractTextWebpack.extract({ 
     fallback: 'style-loader', 
     use: [ 
      { 
      loader: 'css-loader', 
      options: { 
       sourceMap: true, 
       importLoader: true 
      } 
      }, 
      { 
      loader: 'postcss-loader', 
      options: { 
       plugins: [ 
       ... // fill your config 
       ] 
      } 
      }, 
      { 
      loader: 'sass-loader', 
      options: { 
       ... // fill your config 
      } 
      } 
     ] 
     }) 
    } 
    ] 
}, 
plugins: [ 
    new ExtractTextWebpack({ 
    filename: 'bundle.css' 
    }) 
] 
... 

Это версия зависимостей, вам нужно.

"devDependencies": { 
    "css-loader": "^0.26.1", 
    "extract-text-webpack-plugin": "beta", 
    "node-sass": "^4.5.0", 
    "postcss-loader": "^1.2.2", 
    "sass-loader": "^4.1.1", 
    "style-loader": "^0.13.1", 
    "webpack": "^2.2.1", 
    } 

не забудьте потребовать вашего style.scss корня в файл записи.

Пример: в вашем ./dist/main.js требует вашей дерзости, написав require('../sass/liveleverer.scss')