SASS:n käyttö Webpackissa
Opitaan nyt työskentelemään SASS-preprosessorin kanssa. Tätä varten meidän on aluksi asennettava itse SASS:
npm install sass --save-dev
Sitten vastaava lataaja:
npm install sass-loader --save-dev
Oletetaan nyt, että useita SASS-tiedostoja tuodaan sisäänpääsykohtaan:
import './styles1.sass';
import './styles2.sass';
Määritetään Webpack niin, että SASS -koodi muunnetaan CSS:ksi:
export default {
entry: './src/index.js',
rules: [
{
test: /\.sass/i,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
},
],
};
Ja nyt määritetään Webpack niin, että muunnettu CSS kootaan yhteen yhteiseen pakettiin:
export default {
entry: './src/index.js',
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.sass/i,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
],
},
};
Yhdistä useita SASS-tiedostoja sisäänpääsykohtaasi. Kääntää ne CSS:ksi.
