diff --git a/package.json b/package.json index e9606a583..511a1549b 100644 --- a/package.json +++ b/package.json @@ -17,17 +17,19 @@ "@types/react": "0.14.39", "@types/react-dom": "0.14.17", "angular": "1.5.8", - "css-loader": "0.25.0", "ngreact": "0.3.0", "react": "15.3.2", "react-dom": "15.3.2", - "style-loader": "0.13.1", "typescript": "2.0.3" }, "devDependencies": { + "css-loader": "0.25.0", + "node-sass": "3.10.1", + "sass-loader": "4.0.2", "source-map-loader": "0.1.5", + "style-loader": "0.13.1", "ts-loader": "0.9.5", "typings": "1.4.0", - "webpack": "1.13.2" + "webpack": "1.13.3" } } diff --git a/static/css/directives/components/main.scss b/static/css/directives/components/main.scss new file mode 100644 index 000000000..2fe8e44da --- /dev/null +++ b/static/css/directives/components/main.scss @@ -0,0 +1 @@ +@import 'pages/repo-page/repo-page'; diff --git a/static/css/directives/components/pages/repo-page/repo-page.scss b/static/css/directives/components/pages/repo-page/repo-page.scss new file mode 100644 index 000000000..b5ce5fc36 --- /dev/null +++ b/static/css/directives/components/pages/repo-page/repo-page.scss @@ -0,0 +1 @@ +// Repo Page specific styles here diff --git a/static/js/app.tsx b/static/js/app.tsx index 21ccc5298..7378837ac 100644 --- a/static/js/app.tsx +++ b/static/js/app.tsx @@ -1,3 +1,7 @@ +// Import Styles +import '../css/directives/components/main.scss'; + +// Import Components import {rpDirectives as repoPage} from "./directives/components/pages/repo-page/main"; // Init for each page diff --git a/webpack.config.js b/webpack.config.js index a3156acb8..633900093 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,34 +2,24 @@ var webpack = require('webpack'); var path = require("path"); var config = { - /* - * The entry point to the application - */ entry: ["./static/js/app.tsx"], - - /* - * Output path of bundle - */ output: { path: path.resolve(__dirname, "static/js/build"), filename: "bundle.js" }, - - /* - * specify files to search for - */ resolve: { extensions: ["", ".ts", ".tsx", ".js"] }, module: { - /* - * Regex associated with the loader - */ loaders: [ { test: /\.tsx?$/, loader: "ts-loader", exclude: /node_modules/ + }, + { + test: /\.scss$/, + loaders: ['style', 'css', 'sass'] } ] }