Skip to content

Commit 8824827

Browse files
udaypydiudaypydi
authored
Merge pull request #13 from udaypydi/feat/npm-scripts
css and sass loader added
2 parents 6b4f855 + ad405ef commit 8824827

File tree

8 files changed

+801
-219
lines changed

8 files changed

+801
-219
lines changed

‎config/webpack.dev.config.js‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
21
const HtmlWebpackPlugin = require('html-webpack-plugin');
2+
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
33
const paths = require('./paths');
44

55
module.exports = {
@@ -19,6 +19,18 @@ module.exports = {
1919
test: /(.js|.jsx)/,
2020
exclude: /(node_modules|bower_components)/,
2121
use: 'babel-loader',
22+
},
23+
{
24+
test: /\.s[ac]ss$/i,
25+
use: [
26+
'style-loader',
27+
'css-loader',
28+
'sass-loader',
29+
],
30+
},
31+
{
32+
test: /\.css$/i,
33+
use: ['style-loader', 'css-loader'],
2234
}
2335
]
2436
},
@@ -28,7 +40,14 @@ module.exports = {
2840
hash: true,
2941
title: 'Boilerplate',
3042
}),
43+
new MiniCssExtractPlugin({
44+
filename: '[name].css',
45+
chunkFilename: '[id].css'
46+
})
3147
],
48+
resolve: {
49+
extensions: ['.js', 'jsx', '.scss', '.css']
50+
},
3251
devServer: {
3352
contentBase: paths.output,
3453
port: 9000,

‎config/webpack.prod.config.js‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
22
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
3+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
34
const HtmlWebpackPlugin = require('html-webpack-plugin');
45
const paths = require('./paths');
56

@@ -19,6 +20,18 @@ module.exports = {
1920
test: /(.js|.jsx)/,
2021
exclude: /(node_modules|bower_components)/,
2122
use: 'babel-loader',
23+
},
24+
{
25+
test: /\.s[ac]ss$/i,
26+
use: [
27+
'style-loader',
28+
'css-loader',
29+
'sass-loader',
30+
],
31+
},
32+
{
33+
test: /\.css$/i,
34+
use: ['style-loader', 'css-loader'],
2235
}
2336
]
2437
},
@@ -33,5 +46,12 @@ module.exports = {
3346
analyzerMode: 'static',
3447
defaultSizes: 'gzip'
3548
}),
36-
]
49+
new MiniCssExtractPlugin({
50+
filename: '[name].[hash].css',
51+
chunkFilename: '[id].[hash].css'
52+
})
53+
],
54+
resolve: {
55+
extensions: ['.js', 'jsx', '.scss', '.css']
56+
},
3757
}

‎jest.config.js‎

Lines changed: 3 additions & 183 deletions
Original file line numberDiff line numberDiff line change
@@ -1,192 +1,12 @@
1-
// For a detailed explanation regarding each configuration property, visit:
2-
// https://jestjs.io/docs/en/configuration.html
3-
41
module.exports = {
52
moduleDirectories: [
63
'node_modules',
74
__dirname
85
],
9-
// All imported modules in your tests should be mocked automatically
10-
// automock: false,
11-
12-
// Stop running tests after `n` failures
13-
// bail: 0,
14-
15-
// Respect "browser" field in package.json when resolving modules
16-
// browser: false,
17-
18-
// The directory where Jest should store its cached dependency information
19-
// cacheDirectory: "/private/var/folders/v_/w_bhb7rd3sz9pydfllxc4x9r0000gn/T/jest_dx",
20-
21-
// Automatically clear mock calls and instances between every test
226
clearMocks: true,
23-
24-
// Indicates whether the coverage information should be collected while executing the test
25-
// collectCoverage: false,
26-
27-
// An array of glob patterns indicating a set of files for which coverage information should be collected
28-
// collectCoverageFrom: undefined,
29-
30-
// The directory where Jest should output its coverage files
317
coverageDirectory: "coverage",
32-
33-
// An array of regexp pattern strings used to skip coverage collection
34-
// coveragePathIgnorePatterns: [
35-
// "/node_modules/"
36-
// ],
37-
38-
// A list of reporter names that Jest uses when writing coverage reports
39-
// coverageReporters: [
40-
// "json",
41-
// "text",
42-
// "lcov",
43-
// "clover"
44-
// ],
45-
46-
// An object that configures minimum threshold enforcement for coverage results
47-
// coverageThreshold: undefined,
48-
49-
// A path to a custom dependency extractor
50-
// dependencyExtractor: undefined,
51-
52-
// Make calling deprecated APIs throw helpful error messages
53-
// errorOnDeprecated: false,
54-
55-
// Force coverage collection from ignored files using an array of glob patterns
56-
// forceCoverageMatch: [],
57-
58-
// A path to a module which exports an async function that is triggered once before all test suites
59-
// globalSetup: undefined,
60-
61-
// A path to a module which exports an async function that is triggered once after all test suites
62-
// globalTeardown: undefined,
63-
64-
// A set of global variables that need to be available in all test environments
65-
// globals: {},
66-
67-
// The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
68-
// maxWorkers: "50%",
69-
70-
// An array of directory names to be searched recursively up from the requiring module's location
71-
// moduleDirectories: [
72-
// "node_modules"
73-
// ],
74-
75-
// An array of file extensions your modules use
76-
// moduleFileExtensions: [
77-
// "js",
78-
// "json",
79-
// "jsx",
80-
// "ts",
81-
// "tsx",
82-
// "node"
83-
// ],
84-
85-
// A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
86-
// moduleNameMapper: {},
87-
88-
// An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
89-
// modulePathIgnorePatterns: [],
90-
91-
// Activates notifications for test results
92-
// notify: false,
93-
94-
// An enum that specifies notification mode. Requires { notify: true }
95-
// notifyMode: "failure-change",
96-
97-
// A preset that is used as a base for Jest's configuration
98-
// preset: undefined,
99-
100-
// Run tests from one or more projects
101-
// projects: undefined,
102-
103-
// Use this configuration option to add custom reporters to Jest
104-
// reporters: undefined,
105-
106-
// Automatically reset mock state between every test
107-
// resetMocks: false,
108-
109-
// Reset the module registry before running each individual test
110-
// resetModules: false,
111-
112-
// A path to a custom resolver
113-
// resolver: undefined,
114-
115-
// Automatically restore mock state between every test
116-
// restoreMocks: false,
117-
118-
// The root directory that Jest should scan for tests and modules within
119-
// rootDir: undefined,
120-
121-
// A list of paths to directories that Jest should use to search for files in
122-
// roots: [
123-
// "<rootDir>"
124-
// ],
125-
126-
// Allows you to use a custom runner instead of Jest's default test runner
127-
// runner: "jest-runner",
128-
129-
// The paths to modules that run some code to configure or set up the testing environment before each test
130-
// setupFiles: [],
131-
132-
// A list of paths to modules that run some code to configure or set up the testing framework before each test
133-
// setupFilesAfterEnv: [],
134-
135-
// A list of paths to snapshot serializer modules Jest should use for snapshot testing
136-
// snapshotSerializers: [],
137-
138-
// The test environment that will be used for testing
8+
moduleNameMapper: {
9+
"\\.(css|less|scss)$": "identity-obj-proxy"
10+
},
13911
testEnvironment: "jsdom",
140-
141-
// Options that will be passed to the testEnvironment
142-
// testEnvironmentOptions: {},
143-
144-
// Adds a location field to test results
145-
// testLocationInResults: false,
146-
147-
// The glob patterns Jest uses to detect test files
148-
// testMatch: [
149-
// "**/__tests__/**/*.[jt]s?(x)",
150-
// "**/?(*.)+(spec|test).[tj]s?(x)"
151-
// ],
152-
153-
// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
154-
// testPathIgnorePatterns: [
155-
// "/node_modules/"
156-
// ],
157-
158-
// The regexp pattern or array of patterns that Jest uses to detect test files
159-
// testRegex: [],
160-
161-
// This option allows the use of a custom results processor
162-
// testResultsProcessor: undefined,
163-
164-
// This option allows use of a custom test runner
165-
// testRunner: "jasmine2",
166-
167-
// This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
168-
// testURL: "http://localhost",
169-
170-
// Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
171-
// timers: "real",
172-
173-
// A map from regular expressions to paths to transformers
174-
// transform: undefined,
175-
176-
// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
177-
// transformIgnorePatterns: [
178-
// "/node_modules/"
179-
// ],
180-
181-
// An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
182-
// unmockedModulePathPatterns: undefined,
183-
184-
// Indicates whether each individual test should be reported during the run
185-
// verbose: undefined,
186-
187-
// An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
188-
// watchPathIgnorePatterns: [],
189-
190-
// Whether to use watchman for file crawling
191-
// watchman: true,
19212
};

‎package.json‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "react-simple-boilerplate",
33
"version": "1.0.0",
4-
"description": "",
4+
"description": "Simple react boilerplate with support for travis ci, webpack, sass etc.",
55
"main": "index.js",
66
"scripts": {
77
"build": "webpack ---config ./config/webpack.prod.config.js",
@@ -19,7 +19,7 @@
1919
"react-simple-boilerplate",
2020
"react-boilerplate"
2121
],
22-
"author": "",
22+
"author": "Uday Bhaskhar",
2323
"license": "ISC",
2424
"dependencies": {
2525
"@babel/core": "^7.9.0",
@@ -35,14 +35,20 @@
3535
"@testing-library/jest-dom": "^5.5.0",
3636
"@testing-library/react": "^10.0.2",
3737
"clean-webpack-plugin": "^3.0.0",
38+
"css-loader": "^3.5.2",
3839
"eslint": "^6.8.0",
3940
"eslint-config-airbnb": "^18.1.0",
4041
"eslint-plugin-import": "^2.20.2",
4142
"eslint-plugin-jsx-a11y": "^6.2.3",
4243
"eslint-plugin-react": "^7.19.0",
4344
"eslint-plugin-react-hooks": "^2.5.1",
4445
"html-webpack-plugin": "^4.0.4",
46+
"identity-obj-proxy": "^3.0.0",
4547
"jest": "^25.3.0",
48+
"mini-css-extract-plugin": "^0.9.0",
49+
"node-sass": "^4.13.1",
50+
"sass-loader": "^8.0.2",
51+
"style-loader": "^1.1.3",
4652
"webpack-bundle-analyzer": "^3.6.1",
4753
"webpack-dev-server": "^3.10.3"
4854
}

‎src/__tests__/__snapshots__/app.spec.js.snap‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22

33
exports[`should take a snapshot 1`] = `
44
<DocumentFragment>
5-
<div>
5+
<div
6+
class="App--Container"
7+
>
68
Welcome to React Boilerplate!
79
</div>
810
</DocumentFragment>

‎src/app.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react';
2+
import './app.scss';
23

34
export default function App() {
45
return (
5-
<div>Welcome to React Boilerplate!</div>
6+
<div className="App--Container">Welcome to React Boilerplate!</div>
67
);
78
}

‎src/app.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
$bg-color: grey;
2+
$txt-color: white;
3+
4+
.App--Container {
5+
display: flex;
6+
flex: 1;
7+
background: $bg-color;
8+
color: $txt-color;
9+
}

0 commit comments

Comments
 (0)