add sass loader

This commit is contained in:
Ray Elliott 2021-02-27 18:54:22 +00:00
parent 91c310f977
commit bc8fa72fa6
5 changed files with 29 additions and 3 deletions

19
package-lock.json generated
View File

@ -10855,6 +10855,25 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"dev": true "dev": true
}, },
"sass": {
"version": "1.32.8",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.32.8.tgz",
"integrity": "sha512-Sl6mIeGpzjIUZqvKnKETfMf0iDAswD9TNlv13A7aAF3XZlRPMq4VvJWBC2N2DXbp94MQVdNSFG6LfF/iOXrPHQ==",
"dev": true,
"requires": {
"chokidar": ">=2.0.0 <4.0.0"
}
},
"sass-loader": {
"version": "11.0.1",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-11.0.1.tgz",
"integrity": "sha512-Vp1LcP4slTsTNLEiDkTcm8zGN/XYYrZz2BZybQbliWA8eXveqA/AxsEjllQTpJbg2MzCsx/qNO48sHdZtOaxTw==",
"dev": true,
"requires": {
"klona": "^2.0.4",
"neo-async": "^2.6.2"
}
},
"sax": { "sax": {
"version": "1.2.4", "version": "1.2.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",

View File

@ -34,6 +34,8 @@
"postcss-nesting": "^7.0.1", "postcss-nesting": "^7.0.1",
"postcss-preset-env": "^6.7.0", "postcss-preset-env": "^6.7.0",
"postcss-simple-vars": "^6.0.2", "postcss-simple-vars": "^6.0.2",
"sass": "^1.32.8",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0", "style-loader": "^2.0.0",
"stylelint": "^13.8.0", "stylelint": "^13.8.0",
"stylelint-config-recommended": "^3.0.0", "stylelint-config-recommended": "^3.0.0",

View File

@ -1,4 +1,4 @@
// import '../sass/main.scss'; import '../sass/main.scss';
import '../css/mixins.postcss.css'; import '../css/mixins.postcss.css';
import '../css/style.css'; import '../css/style.css';

View File

@ -1,2 +1,2 @@
@import 'breakpoints'; @import 'breakpoints.scss';
@import 'mixins'; @import 'mixins.scss';

View File

@ -88,6 +88,11 @@ module.exports = (env) => ({
exclude: /\.inline\.css$/i, exclude: /\.inline\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'], use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
}, },
{
test: /\.scss$/i,
include: path.resolve(__dirname, 'src/sass'),
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
},
{ {
test: /.(png|svg|jpg|jpeg|gif)$/i, test: /.(png|svg|jpg|jpeg|gif)$/i,
include: path.resolve(__dirname, 'src'), include: path.resolve(__dirname, 'src'),