Skip to content

Commit 5ed7039

Browse files
mariuszmmariuszm
committed
fix(build): fixed adding @import into components’ SASS stylesheets
1 parent 3245a7c commit 5ed7039

9 files changed

Lines changed: 55 additions & 38 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
"postcss-loader": "^1.2.2",
5050
"resolve-url-loader": "^1.6.1",
5151
"sass-loader": "^5.0.0",
52+
"sass-resources-loader": "^1.2.0",
5253
"style-loader": "^0.13.1",
5354
"url-loader": "^0.5.7",
5455
"webpack": "^2.2.1",

‎src/app/root.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ <h2 flex ng-bind="::($ctrl.conf.appName + ' ' + $ctrl.conf.appVersion)"></h2>
66
</div>
77
</md-toolbar>
88

9-
<div class="layout md-whiteframe-z1" layout-md="column">
9+
<div class="layout md-whiteframe-z1" layout="column">
1010
<app-nav></app-nav>
1111
<div ui-view class="md-padding layout-content"></div>
1212
</div>

src/sass/_includes.scss renamed to src/sass/includes/_includes.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// vendor
12
@import '~angular-material/angular-material.css';
23
@import '"https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"';
3-
@import 'includes/variables';
4+

src/sass/includes/_variables.scss renamed to src/sass/includes/variables.scss

File renamed without changes.

‎src/sass/main.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@import 'includes';
2-
31
.layout {
42
margin-top: 20px;
53
width: $layout-width;

‎webpack.base.conf.js‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
const path = require('path');
22
const webpack = require('webpack');
3+
const NODE_ENV = process.argv.indexOf('-p') !== -1 ? 'production' : 'development';
34
const ROOT_PATH = path.resolve(__dirname, './');
5+
const ExtractTextPlugin = require('extract-text-webpack-plugin');
6+
7+
const sassImports = [
8+
path.resolve(__dirname, './src/sass/includes/_includes.scss'),
9+
path.resolve(__dirname, './src/sass/includes/variables.scss')
10+
];
11+
12+
const isProduction = () => NODE_ENV === 'production';
413

514
const isExternal = (module) => {
615
let userRequest = module.userRequest;
@@ -48,6 +57,29 @@ module.exports = {
4857
{
4958
test: /\.(png|jpg|gif|svg)$/,
5059
use: ['url-loader?limit=8192&name=[path][name].[ext]?[hash]']
60+
},
61+
62+
{
63+
test: /\.css$/,
64+
use: ExtractTextPlugin.extract({
65+
fallback: 'style-loader',
66+
use: [
67+
{ loader: 'css-loader', options: { sourceMap: !isProduction() } },
68+
{ loader: 'postcss-loader', options: { sourceMap: !isProduction() } }
69+
]
70+
})
71+
},
72+
{
73+
test: /\.(sass|scss)$/,
74+
use: ExtractTextPlugin.extract({
75+
fallback: 'style-loader',
76+
use: [
77+
{ loader: 'css-loader', options: { sourceMap: !isProduction() } },
78+
{ loader: 'postcss-loader', options: { sourceMap: !isProduction() } },
79+
{ loader: 'sass-loader', options: { sourceMap: !isProduction() } },
80+
{ loader: 'sass-resources-loader', options: { resources: sassImports } }
81+
]
82+
})
5183
}
5284
]
5385
},
@@ -56,6 +88,12 @@ module.exports = {
5688
new webpack.optimize.CommonsChunkPlugin({
5789
name: 'vendor',
5890
minChunks: (module) => isExternal(module)
59-
})
91+
}),
92+
93+
new ExtractTextPlugin({
94+
filename : 'styles/[name].[hash].css',
95+
allChunks : true,
96+
disable : !isProduction()
97+
}),
6098
]
6199
};

‎webpack.dev.config.js‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ const path = require('path');
33
const webpack = require('webpack');
44
const merge = require('webpack-merge');
55
const HtmlWebpackPlugin = require('html-webpack-plugin');
6-
const ExtractTextPlugin = require('extract-text-webpack-plugin');
76

87
module.exports = merge(baseConfig, {
98

@@ -18,13 +17,6 @@ module.exports = merge(baseConfig, {
1817
chunkFilename: 'js/[name].js'
1918
},
2019

21-
module: {
22-
rules: [
23-
{ test: /\.css$/, use: ['style-loader', 'css-loader?sourceMap', 'postcss-loader?sourceMap'] },
24-
{ test: /\.(sass|scss)$/, use: ['style-loader', 'css-loader?sourceMap', 'postcss-loader?sourceMap', 'sass-loader?sourceMap'] }
25-
]
26-
},
27-
2820
plugins: [
2921
new webpack.NamedModulesPlugin(),
3022
new HtmlWebpackPlugin({

‎webpack.prod.config.js‎

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ const path = require('path');
33
const webpack = require('webpack');
44
const merge = require('webpack-merge');
55
const CleanWebpackPlugin = require('clean-webpack-plugin');
6-
const ExtractTextPlugin = require('extract-text-webpack-plugin');
76
const HtmlWebpackPlugin = require('html-webpack-plugin');
87

98
module.exports = merge(baseConfig, {
@@ -15,29 +14,8 @@ module.exports = merge(baseConfig, {
1514
chunkFilename: 'js/[name].[hash].js'
1615
},
1716

18-
module: {
19-
rules: [
20-
{ test: /\.css$/,
21-
use: ExtractTextPlugin.extract({
22-
fallback: 'style-loader',
23-
use: ['css-loader', 'postcss-loader']
24-
})
25-
},
26-
{ test: /\.(sass|scss)$/,
27-
use: ExtractTextPlugin.extract({
28-
fallback: 'style-loader',
29-
use: ['css-loader', 'postcss-loader', 'sass-loader']
30-
})
31-
}
32-
]
33-
},
34-
3517
plugins: [
3618
new CleanWebpackPlugin(['dist']),
37-
new ExtractTextPlugin({
38-
filename: 'styles/[name].[hash].css',
39-
allChunks: true
40-
}),
4119

4220
new HtmlWebpackPlugin({
4321
template: './index.html',

‎yarn.lock‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -220,7 +220,7 @@ async@1.x, async@^1.4.0, async@^1.5.2:
220220
version "1.5.2"
221221
resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
222222

223-
async@^2.0.1, async@^2.1.2:
223+
async@^2.0.1, async@^2.1.2, async@^2.1.4:
224224
version "2.1.4"
225225
resolved "https://registry.yarnpkg.com/async/-/async-2.1.4.tgz#2d2160c7788032e4dd6cbe2502f1f9a2c8f6cde4"
226226
dependencies:
@@ -4428,9 +4428,18 @@ sass-loader@^5.0.0:
44284428
lodash.tail "^4.1.1"
44294429
pify "^2.3.0"
44304430

4431+
sass-resources-loader@^1.2.0:
4432+
version "1.2.0"
4433+
resolved "https://registry.yarnpkg.com/sass-resources-loader/-/sass-resources-loader-1.2.0.tgz#8e39eab1d7446d898160e21fcf8fb92611c65d08"
4434+
dependencies:
4435+
async "^2.1.4"
4436+
chalk "^1.1.3"
4437+
glob "^7.1.1"
4438+
loader-utils "^0.2.16"
4439+
44314440
sax@~1.2.1:
4432-
version "1.2.1"
4433-
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
4441+
version "1.2.2"
4442+
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.2.tgz#fd8631a23bc7826bef5d871bdb87378c95647828"
44344443

44354444
select-hose@^2.0.0:
44364445
version "2.0.0"

0 commit comments

Comments
 (0)